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

Question

嗨，我正在创建动态字段和应用验证。但由于某种原因，它不工作。我在输入长字符的字段中擦写数据，但验证不起作用。

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

Answer 1

的问题是，这些字段必须有一致的唯一的名称，你的情况，他们都具有相同的名称variant_value。因此，动态字段可以根据其名单上的位置来命名，例如：

name="variant_value{{$index}}" 

这样，您就可以使用唯一的名称寻求外地和验证状态：

<span ng-show="addproductForm['variant_value'+$index].$invalid && !addproductForm['variant_value'+$index].$pristine"> 
    //my message 
</span> 

另外，AngularJs验证系统需要ngForm指令。

<form name="addproductForm" novalidate> 
</form> 

以下代码段是您的代码的工作版本。

angular.module('myApp', []) 
 
    .controller('myController', function ($scope) { 
 
    $scope.variants = [ 
 
     { name: 'variant1', variant_value: "1" }, 
 
     { name: 'variant2', variant_value: "" }, 
 
     { name: 'variant3', variant_value: "" }, 
 
     { name: 'variant4', variant_value: "" }, 
 
     { name: 'variant5', variant_value: "" }, 
 
    ]; 
 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

.help-block{ 
 
    display:inline-block; 
 
} 
 
.color-ferozimp{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<div ng-controller="myController"> 
 
    <form name="addproductForm" novalidate> 
 
    <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> 
 
    <input type="text" 
 
    name="variant_value{{$index}}" 
 
    class="form-control" 
 
    ng-model="variant.variant_value" 
 
    placeholder="Enter {{variant.name}}" 
 
    ng-minlength="2" 
 
    ng-maxlength="30" 
 
    required> 
 
    <span ng-show="addproductForm['variant_value'+$index].$invalid && !addproductForm['variant_value'+$index].$pristine" 
 
    class="help-block color-ferozimp"> 
 
    Choose {{variant_name}} please 
 
    </span> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

您正在使用相同的值 “variant_value” 命名每个动态字段。

我会给他们自己的名字使用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