CODEWITHSUNDEEP
angularvalidationinputng-pattern
Sericet
Sericet

Reputation: 21

ng-pattern not thowing an error

Been trying to figure this out for hours. Figured I would ask here.

I have an input field and I simply want to display a message if someone tries to type in a number instead. My research lead me to ng-pattern but I can't seem to figure out why it won't work for me.

  <input 
        type="string"  
        class="form-control" 
        [(ngModel)]="firstName"
        name ="firstName" 
        #studentFirstName ="ngModel"
        autocomplete="new-password" 
        autocomplete="off" 
        ng-pattern="/^[a-zA-Z\s]*$/"
        required>
        <div *ngIf="studentFirstName.invalid && (studentFirstName.dirty || studentFirstName.touched)" class="row">
            <div class="col-sm-12 text-danger">
              The form is invalid somewhere
            </div>
            <div *ngIf='studentFirstName.errors.required' class="col-sm-12 text-danger">
              First Name is required
            </div>
            <div *ngIf='studentFirstName.errors.pattern' class="col-sm-12 text-danger">
                First Name must not contain numbers
              </div>
        </div>

Upvotes: 1

Views: 72

Answers (1)

Aravind
Aravind

Reputation: 41571

With Angular you can use the available PatternValidator

<input 
        type="string"  
        class="form-control" 
        [(ngModel)]="firstName"
        name ="firstName" 
        #studentFirstName ="ngModel"
        autocomplete="new-password" 
        autocomplete="off" 
        pattern="/^[a-zA-Z\s]*$/" <-----------------pattern
        required>
        <div *ngIf="studentFirstName.invalid && (studentFirstName.dirty || studentFirstName.touched)" class="row">
            <div class="col-sm-12 text-danger">
              The form is invalid somewhere
            </div>
            <div *ngIf='studentFirstName.errors.required' class="col-sm-12 text-danger">
              First Name is required
            </div>
            <div *ngIf='studentFirstName.errors.pattern' class="col-sm-12 text-danger">
                First Name must not contain numbers
              </div>
        </div>

Upvotes: 1

Related Questions