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