基本角度形式验证不起作用

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.

Answer 1

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/

Answer 2

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