2017-03-21 39 views
1

爲什麼我的名稱文本框中的ng模式允許特殊字符? 這是視圖文件:如何驗證文本框中的angularjs?

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

你正在使用哪個版本的angularJS? –

+0

我的angularJS版本是1.5.0 –

回答

0

單獨ng-pattern不會阻止用戶進入某個文本到文本框。如果你想這樣做,你需要在<input>上使用自定義屬性指令。

ng-pattern旨在與AngularJS的表單驗證結合使用,您可以使用它來隱藏/顯示驗證消息並在提交表單之前驗證表單。

0

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在每次迭代中輸入要添加唯一的名稱。