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

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>

我添加了两个p标签，一个带有有效标签，另一个带有无效标签，但是它们都没有显示出来。 任何帮助将不胜感激。

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>

例

使用ngMessages进行AngularJS表单验证