sarabs3 sarabs3 - 15 days ago 6
AngularJS Question

basic angular form validation not working

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.

Answer

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/

Comments