basic angular form validation not working

Question

Template:

<div class="container">
<div class="row">
    <div class="col s12">
        <p>Add products here</p>
        <form name="addProductForm" data-ng-submit="addProduct(addProductForm.$valid)" novalidate>
            <label for="productName">Name</label>
            <input name="productName" type="text" placeholder="name" data-ng-model="product.name" required="" />
            <p ng-show="addProductForm.name.$valid" >Wrong Name</p>
            <p ng-show="addProductForm.name.$invalid" >Write Name</p>
            <label for="productName">Type</label>
            <input name="productName" type="text" placeholder="name" data-ng-model="product.type" required="" />
            <input type="submit" data-ng-disabled="addProductForm.$invalid" class="btn" value="Add" />
        </form>
    </div>
</div>

I have added two p tags one with valid and other with invalid but both of them are not showing up. Any help will be appreciated.

look if you got any errors in F12 (developer tools) on youre browser. Look at console tab — lordkain
– lordkain, Commented Nov 17, 2016 at 13:01
Where are you declaring your controller (ng-controller) and your app (ng-app) in your html? — deChristo
– deChristo, Commented Nov 17, 2016 at 13:02
there is no error in the console. controller and app is well defined everything else is working — sarabs3
– sarabs3, Commented Nov 17, 2016 at 13:04

yBrodsky · Accepted Answer · 2016-11-17 13:21:52Z

2

The problem is in your "name" property of your inputs.

<p ng-show="addProductForm.productName.$invalid" >Wrong Name</p>
<p ng-show="addProductForm.productType.$invalid" >Write Name</p>


<input name="productType" type="text" data-ng-model="product.type" required="" />
<input name="productName" type="text" placeholder="name" data-ng-model="product.name" required="" />

The "name" property has to match whatever you are evaluating in the condition.

Here is a working fiddle:

http://jsfiddle.net/rskhLcnz/

answered Nov 17, 2016 at 13:21

yBrodsky

5,0614 gold badges24 silver badges35 bronze badges

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

1 Comment

sarabs3 Over a year ago

yes i have changed the name of the field to match the name of the model and it is working fine. Thanks

Gennady Grishkovtsov · Accepted Answer · 2016-11-17 18:24:56Z

I suggest you use ngMessages instead of ngShow and remember the field names

    <form name="myForm" ng-init="formData = {}">
      <input name="productName" type="text" ng-model="formData.productName" placeholder="Product name" required>
      <div ng-messages="myForm.productName.$error">
        <div ng-message="required">This field is required</div>
      </div>
      <input name="productType" type="text" ng-model="formData.productType" placeholder="Product type" required>
      <div ng-messages="myForm.productType.$error">
        <div ng-message="required">This field is required</div>
      </div>
      <input type="submit" ng-disabled="myForm.$invalid" class="btn" value="Add" />
    </form>
    <pre>{{formData}}</pre>

Example

AngularJS Form Validation with ngMessages

Collectives™ on Stack Overflow

basic angular form validation not working

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related