основной проверки Угловой формы не работает

Question

шаблона:

<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> 

я добавил два р тегов один с действительным и другими недействительным, но оба они не отображается. Любая помощь будет оценена по достоинству.

Answer 1

Проблема заключается в вашем свойстве «имени» ваших входов.

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

Свойство «имя» должно соответствовать всем, что вы оцениваете при условии.

Вот рабочая скрипку:

http://jsfiddle.net/rskhLcnz/

Answer 2

Я предлагаю вам использовать ngMessages вместо ngShow и помните имена полей

<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