How to validate an angularjs in textbox? - php

Question

Why is my ng-pattern in textbox of name is allowing special characters?
This is the view file:
<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>
Cancel
</div>
</div>

Answer 1

ng-pattern alone will not prevent a user from entering certain text into a textbox. If you want to do that, you'll need to use a custom attribute directive on the <input>.
ng-pattern is meant to be used in conjunction with AngularJS' form validation, you can use it to hide/show validation messages and to validate a form before it is submitted.

Answer 2

AngularJS form validations requires unique name for each input field in the form.
But in your case you are using the same name for all the input fields in ng-repeat.
So change your input to add unique name for input in each iteration using $index
<input type="text" class="form-control" name="students{{$index}}" ng-trim="false" ng-model="class.students[$index]" required ng-pattern="/^[a-zA-Z]*$/">
Here is the Plunker.