How to validate an angularjs in textbox?

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>
        <a href ="<?php echo base_url();?>index.php/main/index" class="btn btn-default btn-grad btn-rect">Cancel</a>
    </div>
</div>

Which version of angularJS you are using? – Gangadhar Jannu Mar 21 '17 at 19:02 — Gangadhar Jannu, Mar 21 '17 at 19:02
My angularJS version is 1.5.0 – Ronnel Gonzales Mar 21 '17 at 19:09 — Ronnel Gonzales, Mar 21 '17 at 19:09

score 0 · Answer 1 · answered Mar 21 '17 at 19:11

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.

Gangadhar Jannu · Answer 2 · 2017-03-21T20:00:22.970

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.

How to validate an angularjs in textbox?

2 Answers2