sarabs3 sarabs3 - 5 months ago 26
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.


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: