Angular Js - 为什么动态字段的验证不起作用?

时间:2016-12-08 10:06:58

标签: angularjs forms validation dynamic

您好我正在创建动态字段并应用验证。但由于某种原因它不起作用。我在输入长字符的字段中擦除数据,但验证不起作用。

<div data-ng-repeat="variant in variants" class="col-md-12 col-sm-12 col-xs-12 form-group">
  <label for="text">{{variant.name}}:</label>
  <p ng-show="addproductForm.variant_value.$invalid && !addproductForm.variant_value.$pristine"
     class="help-block color-ferozimp">
    Choose {{variant_name}} please
  </p>
  <input type="text"
     name="variant_value"
     class="form-control"
     ng-model="variant.variant_value"
     placeholder="Enter {{variant.name}}"
     ng-minlength="2"
     ng-maxlength="30"
     required>
</div>

1 个答案:

答案 0 :(得分:0)

您使用相同的值命名每个动态字段&#34; variant_value&#34;。

我会使用ng-repeat的$ index属性给他们自己的名字。

<form name="addproductForm">
<div data-ng-repeat="variant in variants">
  <label for="text">{{variant.name}}:</label>
  <p ng-show="addproductForm[{{$index}}].$invalid && !addproductForm[{{$index}}].$pristine">Choose {{variant_name}} please</p>
  <input type="text" name="{{$index}}" class="form-control" ng-model="variant.variant_value" placeholder="Enter {{variant.name}}" ng-minlength="2" ng-maxlength="30" required>
</div>
</form>

请参阅此plunkr。

https://plnkr.co/edit/dXCjGJDwudGdKFrxHg5n?p=preview