javascript - 基本 Angular 形式验证不起作用

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

问题出在您输入的“name”属性中。

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

“名称”属性必须与您在条件中评估的内容相匹配。

这是一个工作 fiddle :

http://jsfiddle.net/rskhLcnz/