CODEWITHSUNDEEP
angularjs
JJJ
JJJ

Reputation: 93

State Properties of AngularJS for form validation is not returning a value

**This is my code snippet of an html file**
              <form name="demoForm" novalidate ng-submit="" role="form">
                   <p>
                       Text Input Status : <br />
                       Error[Bind to validation attribute] : {{demoForm.name.$error}}<br />
                       Pristine[No interaction yet] : {{demoForm.name.$pristine}}<br />
                       Touched[Tabbed out] : {{demoForm.name.$touched}}<br />
                       Untouched[Not tabbed out] : {{demoForm.name.$untouched}}<br />
                       Valid[Valid model] : {{demoForm.name.$valid}}<br />
                       Invalid[Invalid model] : {{demoForm.name.$invalid}}<br />
                       Dirty[Change the value once at least] : {{demoForm.name.$dirty}}
                   </p>
                    <input name="name" type="text" placeholder="Enter a text" ng-required="true" />
                   <input type="text" placeholder="Enter a number" />
                   <input type="submit" class="btn btn-success"/>
               </form>

The values of the state properties mainly inside paragragh tags below Text Input Status is not displaying even if its default value probably(if it exists). The script tag is correctly written. But I just don't get why it's not displaying its value

Upvotes: 1

Views: 44

Answers (1)

Vivz
Vivz

Reputation: 6630

You have to use ng-model on your input elements. The name attribute of your input field is to refer that particular element but your form will be checking the value of ng-model variable for triggering validations against that input. The following taken from angular documentation of forms can give you clearer idea.

"A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute. Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance. This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives."

angular.module("myApp",[]).controller("myController",function($scope){

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
 <form name="demoForm" novalidate  role="form" ng-submit="">
                   <p>
                       Text Input Status : <br />
                       Error[Bind to validation attribute] : {{demoForm.name.$error}}<br />
                       Pristine[No interaction yet] : {{demoForm.name.$pristine}}<br />
                       Touched[Tabbed out] : {{demoForm.name.$touched}}<br />
                       Untouched[Not tabbed out] : {{demoForm.name.$untouched}}<br />
                       Valid[Valid model] : {{demoForm.name.$valid}}<br />
                       Invalid[Invalid model] : {{demoForm.name.$invalid}}<br />
                       Dirty[Change the value once at least] : {{demoForm.name.$dirty}}
                   </p>
                    <input name="name" ng-model="name" type="text" placeholder="Enter a text" ng-required="true" />
                   <input type="text" placeholder="Enter a number" />
                   <input type="submit" class="btn btn-success"/>
               </form>
</div>

Upvotes: 1

Related Questions