Как проверить angularjs в текстовом поле?

Question

Почему мой ng-шаблон в текстовом поле name разрешает использование специальных символов? Это файл просмотра:

<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. Поэтому измените свой ввод, чтобы добавить уникальное имя для ввода в каждой итерации, используя $index

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

Вот Плункер.