Form error not displayed using $error, $invalid

Question

I'm trying to replicate an example in ng-book jsbin.

Here is my plnkr

app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.fields = [{placeholder: 'Email', isRequired: true},
               {placeholder: 'Password', isRequired: true},
               {placeholder: 'Comment(Optional)', isRequired: false}]
  $scope.formSubmit = function(){
    for (var i=0; i < $scope.fields.length; i++)
    { var obj = $scope.fields[i] 
      for (var key in obj){
        if(obj.hasOwnProperty(key)){
          alert(key + ' : ' + obj[key])
        }
      }
    }
  }                 
});

html

<html ng-app="plunker">

  <head><script data-require="[email protected]"     src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name='main_form' ng-submit='formSubmit()' novalidate>
  <div ng-repeat="field in fields" ng-form="dynamic_form">
    <input type='text'
           name='dynamic_input'
           ng-required='field.isRequired'
           ng-model='field.name'
           placeholder='{{field.placeholder}}'>
        <div ng-show="dynamic_form.dynamic_input.$dirty && dynamic_form.dynamic_input.$invalid">
          <span ng-show="dynamic_form.dynamic_input.$error.required"> This field is required.</span>
        </div> 
      </div>
      <button type='submit' ng-diabled="main_form.$pristine && main_form.$invalid">Submit     All</button>
    </form>
  </body>

</html>

Issues I'm facing here:

submit button is not disabled
Error for required field are not being shown.
If I click on submit, I'm getting $hash key as well in alert. Why is that?

Thanks.

can I show you another example with validating in different way or you want it exactly in this way ? — Narek Mamikonyan
– Narek Mamikonyan, Commented Aug 29, 2014 at 14:33

PSL · Accepted Answer · 2014-08-29 15:43:15Z

2

1)submit button is not disabled

You have a typo it must be ng-disabled. Also change your condition to disable it when invalid :-

 <button type='submit' ng-disabled="main_form.$invalid">Submit All</button>

2)Error for required field are not being shown.

It will now show up when you remove the typed in value

3)If I click on submit, I'm getting $hash key as well in alert. Why is that?

Angular adds a unique key ($$hashkey) to keep track of the repeated items. If you specify a track by in your ng-repeat (which must be a unique key) it won't add it. In your case since there is no id or anything associated you could use $index. (In the demo i have added an id property and used that to track by)

ng-repeat="field in fields track by $index"

Demo

edited Aug 29, 2014 at 15:43

answered Aug 29, 2014 at 15:31

PSL

124k21 gold badges257 silver badges243 bronze badges

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

3 Comments

Indyarocks Over a year ago

Thanks a lot. Particularly for extra effort for the Demo :)

Indyarocks Over a year ago

I did not :P You're welcome anytime :) You might see a lot of questions bombarding on stackoverflow on angular. As I started learning angularjs recently.

PSL Over a year ago

:D sorry that was a typo. Best of luck!! with your learning.. :)

Jeffrey Vest · Accepted Answer · 2014-08-29 16:12:18Z

2

You misspelled the word "disabled" in your submit button.

<button type='submit' ng-diabled="main_fo

You explicitly told it that you wanted it to only show the errors if it's dirty. So you won't see them until you fill something in, then delete it back out again. If you want to see the errors until the fields are filled in, then remove the dirty check.

<div ng-show="dynamic_form.dynamic_input.$dirty &&

$$hashKey is added as part of ngRepeat. To avoid those properties, AngularJS internally (for angular.toJson) does the following test.

key.charAt(0) === '$' && key.charAt(1) === '$'

You can also use angular.forEach to avoid having to check hasOwnProperty but it doesn't skip the '$$' variables either.

edited Aug 29, 2014 at 16:12

answered Aug 29, 2014 at 15:36

Jeffrey Vest

1341 silver badge12 bronze badges

Collectives™ on Stack Overflow

Form error not displayed using $error, $invalid

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related