テキストボックスのanglejsを検証する方法は？

Question

名前のテキストボックスのng-patternが特殊文字を許可しているのはなぜですか？ これは、ビューファイルです：

<div ng-repeat="s in config.students"> 
    <div class="form-group"> 
     <label class="control-label col-lg-2"></label> 
     <div class="col-lg-5"> 
      <input type="text" class="form-control" name="students[]" ng-trim="false" ng-model="class.students[$index]" required ng-pattern="/^[a-zA-Z]*$/"> 
     </div> 
     <div class="col-md-5"> 
      <button class="btn btn-danger btn-sm" ng-click="removeStudent($index)" type="button">X</button> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <label class="control-label col-lg-2"></label> 
    <div class="col-lg-4"> 
     <button type="submit" class="btn btn-primary btn-grad btn-rect">Submit</button> 
     <a href ="<?php echo base_url();?>index.php/main/index" class="btn btn-default btn-grad btn-rect">Cancel</a> 
    </div> 
</div> 

Answer 1

ng-patternだけでは、テキストボックスに特定のテキストを入力することからユーザーを防ぐことはできません。これを行うには、<input>のカスタム属性ディレクティブを使用する必要があります。

ng-patternは、AngularJSフォームの検証と併せて使用するためのもので、検証メッセージの表示/非表示や送信前のフォームの検証に使用できます。

Answer 2

AngularJSフォームの検証には、フォーム内の各入力フィールドに固有の名前が必要です。

あなたのケースでは、ng-repeatのすべての入力フィールドに同じ名前が使用されています。 ので、ここで$インデックス

<input type="text" class="form-control" name="students{{$index}}" ng-trim="false" ng-model="class.students[$index]" required ng-pattern="/^[a-zA-Z]*$/"> 

を使用して、各反復で入力のための一意の名前を追加するために、あなたの入力を変更するには、Plunkerです。