Angularjsが動的に追加したものを検証する

Question

人を追加する指示を出しています。

必要条件は、人数と年齢と性別を設定することです。

私の指示には選択ドロップダウンがあります。 最初の0〜10人の人数を設定します。 その変更には、人のオブジェクトを配列に追加する$ watchがあります。私はジェンダーと birthYearのためのセレクトドロップダウンのためのNGリピートを持っている私のHTMLビューで

$scope.$watch('selectedAntal', function(newValue, oldValue) { 
 
    if (!newValue) { 
 
    return; 
 
    } 
 

 
    for (var i = $scope.anonymousPersons.length; i < newValue; i++) { 
 
    $scope.anonymousPersons.push({ 
 
     gender: 0, 
 
     birthYear: -1 
 
    }); 
 
    } 
 

 
    updateNumber($scope, newValue, 10); 
 
});

。

<label for="numberOf_{{name}}">Choose number of persons</label> 
 

 
<select name="numberOf_{{name}}" ng-model="selectedAntal" ng-options="x for x in antal" ng-required="true"> 
 
    <!--<option value="" default style="display: none;">Choose</option>--> 
 
</select> 
 

 
<table class="table"> 
 
    <thead> 
 
     <tr> 
 
      <th>Gender</th> 
 
      <th>Birth year</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="person in anonymousPersons"> 
 
      <td> 
 
       <select name="{{name}}_{{$index}}_gender" ng-model="person.gender" ng-options="x.text for x in genders" required > 
 
        <option value="" default style="display: none;">Choose</option> 
 
       </select> 
 
      </td> 
 
      <td> 
 
       <select name="{{name}}_{{$index}}_birthYear" ng-model="person.birthYear" ng-options="x for x in years" required > 
 
        <option value="" default style="display: none;">Choose</option> 
 
       </select> 
 
      </td> 
 
      <td> 
 
       {{person|json}} 
 
      </td> 
 
      <td><button ng-click="remove(person)">Remove</button></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

すべてが検証を除いて正常に動作します。ジェンダーと誕生年の選択は両方とも必須です。

しかし、検証は機能しません。

私の推測では、Angularは新しく作成されたフィールドについて何も知らないが、$ dirtyフィールドは機能すると思います。

手動で検証を実行する検証にどのように追加する必要がありますか？

I have now made an example on plnkr that demonstrates the problem.

Answer 1

検証が動作しますが、問題はあなたには、いくつかの値を使用して、あなたの選択のモデルをintializeということです。その場合、「要求」が解決されます。あなたがnullで初期化する場合、何か問題はありません。