ng-class in AngularJS form validation

Question

I am confusing by the following code about angularJS form validation. Please see the HTML form and JavaScript code below, It is sample code given be our instructor. What I do not understand is in this tag

    <div class="form-group" ng-class="{ 'has-error': feedbackForm.firstName.$error.required && !feedbackForm.firstName.$pristine }">

inside the ng-class ="{...}", the "feedbackForm" is the name of the form, but the "firstName" is the an attribute of the $scope.feedback object, as described in the JavaScript code. What mechanism that connect them together such that it can be access by "feedbackFrom.firstName"?

Beside, what are the "$error" and "$pristine" right after the "feedbackForm.firstName"? Is it an object predefined by AngularJS? And, again, how they can be accessed by using a period?

HTML form:

<div ng-controller="FeedbackController">
    <form role="form" name="feedbackForm" ng-submit="sendFeedback()" novalidate>
      <div class="form-group" ng-class="{ 'has-error': feedbackForm.firstName.$error.required &&!feedbackForm.firstName.$pristine }">
       <label for="firstname" class="col-sm-2 control-label">First Name</label>
       <div  class="col-sm-10">
        <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name" ng model="feedback.firstName" required>
        <span ng-show="feedbackForm.firstName.$error.required && !feedbackForm.firstName.$pristine" class="help-block">Your first name is required.</span>
       </div>
      </div>
    </form>

related JavaScript code:

    .controller('ContactController', ['$scope', function($scope) {

     $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };

     var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];

    $scope.channels = channels;
    $scope.invalidChannelSelection = false;

    }])

   .controller('FeedbackController', ['$scope', function($scope) {

    $scope.sendFeedback = function() {

    console.log($scope.feedback);

    if ($scope.feedback.agree && ($scope.feedback.mychannel == "")) {
       $scope.invalidChannelSelection = true;
       console.log('incorrect');
      }
    else {
       $scope.invalidChannelSelection = false;
       $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };
       $scope.feedback.mychannel="";
       $scope.feedbackForm.$setPristine();
       console.log($scope.feedback);
       }
     };
  }])

Bjørn Sørensen · Accepted Answer · 2015-12-10 21:46:15Z

1

You are a bit off.

The feedbackForm.firstName refers the form feedbackForm and the input field firstName.

The $scope.feedback object is refered to by ngModel and handles the model binding.

$error and $pristine are classes added by AngularJS to indicate the state of the input field.

answered Dec 10, 2015 at 21:46

Bjørn Sørensen

9211 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan · Accepted Answer · 2015-12-10 21:48:46Z

1

When you create a form with angular, a reference for every element within that form is created in the form object.

$error and $pristine are created by angular to signify the state of the form field. If firstName.$error = true then the value entered in the firstName field doesn't meet the validation requirements (e.g. length). $pristine tells angular whether or not the form has been touched. This keeps a field from showing as invalid when the user hasn't entered any information yet.

tl;dr:

$scope.feedback.firstName refers directly to the input field, whereas $scope.feedbackForm.firstName refers to the input field as it relates to the form.

answered Dec 10, 2015 at 21:48

Ryan

1431 silver badge7 bronze badges

Comments

Bata · Accepted Answer · 2015-12-10 21:45:55Z

0

it can be accessed with "feedbackFrom.firstName" because you have named your form with "feedbackFrom" and have name attribute on your input with the value "firstName".

As for the form object and its $error and $pristine, You have it in the doc right here: https://docs.angularjs.org/api/ng/type/form.FormController

answered Dec 10, 2015 at 21:45

Bata

6513 silver badges7 bronze badges

Collectives™ on Stack Overflow

ng-class in AngularJS form validation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related