AngularJS Validation trouble

Question

I have a form which seems to work well on the most part. However, my selects are playing up a bit, and I cant seem to submit the form. My form looks like


    
        Title
        
            
        
    
    
        First Name(s)
        
            
        
    
    
        Link to be sent
        
            
        
    
    
        
            
        
    

{{ resultMessage }}

So a simple form with two selects and one input. My Controller looks like the following

'use strict';

/* Controllers */

function EmailViewCtrl($scope, $http) {

    $scope.titles =
    [
        "Mr",
        "Mrs",
        "Miss",
        "Ms",
        "Dr"
    ];

    $scope.links =
    [
        "email1",
        "email2",
        "email3",
        "email4",
        "email5"
    ];

    $scope.result = 'hidden'
    $scope.resultMessage;
    $scope.formData; //formData is an object holding the name, email, subject, and message
    $scope.submitButtonDisabled = false;
    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
    $scope.submit = function(emailform) {
        $scope.submitted = true;
        $scope.submitButtonDisabled = true;
        if (emailform.$valid) {
            $http({
                method  : 'POST',
                url     : 'backend/email.php',
                data    : $.param($scope.formData),  //param method from jQuery
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
            }).success(function(data){
                console.log(data);
                if (data.success) { //success comes from the return json object
                    $scope.submitButtonDisabled = true;
                    $scope.resultMessage = data.message;
                    $scope.result='bg-success';
                } else {
                    $scope.submitButtonDisabled = false;
                    $scope.resultMessage = data.message;
                    $scope.result='bg-danger';
                }
            });
        } else {
            $scope.submitButtonDisabled = false;
            $scope.resultMessage = 'Failed   Please fill out all the fields.';
            $scope.result='bg-danger';
        }
    }
}

EmailViewCtrl.$inject = ['$scope', '$http'];

Now the problem is, my selects on their default option (please select) have a red border around them on page load. Obviously this should not appear until they submit the form without an option selected.

Secondly, if I provide the form with valid data, the submit button does not seem to become active. How can I make this active?

Lastly, at the moment, everything is in one controller. Should I move things like the selects values into their own controller and what would be the best way to achieve this?

Thanks

Denis Thomas · Accepted Answer

You can use form.input.$dirty to check if an input has been touched and only in that case show a validation error.

ng-class="{ 'has-error': emailform.inputName.$invalid && emailform.inputName.$dirty }"

See the example below for a working copy of your code:

var app = angular.module("app", []);

app.controller("EmailViewCtrl", function EmailViewCtrl($scope, $http) {

  $scope.titles = [
    "Mr",
    "Mrs",
    "Miss",
    "Ms",
    "Dr"
  ];

  $scope.links = [
    "email1",
    "email2",
    "email3",
    "email4",
    "email5"
  ];

  $scope.result = 'hidden'
  $scope.resultMessage;
  $scope.formData; //formData is an object holding the name, email, subject, and message
  $scope.submitButtonDisabled = false;
  $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
  $scope.submit = function(emailform) {
    $scope.submitted = true;
    $scope.submitButtonDisabled = true;
    if (emailform.$valid) {
      alert("POST!");
    } else {
      $scope.submitButtonDisabled = false;
      $scope.resultMessage = 'Failed   Please fill out all the fields.';
      $scope.result = 'bg-danger';
    }
  }
});







  
    
      Title
      
        
      
    
    
      First Name(s)
      
        
      
    
    
      Link to be sent
      
        
      
    
    
      
        
      
    
  
  {{ resultMessage }}

AngularJS Validation trouble

Answers (1)

Related Questions