sarabs3 sarabs3 - 1 year ago 73
AngularJS Question

basic angular form validation not working


<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="" required="" />
<p ng-show="$valid" >Wrong Name</p>
<p ng-show="$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" />

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 Source

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="" required="" />

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

Here is a working fiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download