RegEx application in angular 2 form

Question

I am trying to generate an error in case someone is entering wrong pattern into the input box but that does not seem to be working. What I am trying to do is below:

<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !Username.valid }">
        <label for="Username">Username</label>
        <input type="text" class="form-control" name="Username" [(ngModel)]="model.Username" #Username="ngModel" required />
        <div *ngIf="f.submitted && !Username.valid" class="help-block">Username is required</div>
    </div>

    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !Email.valid }">
        <label for="Email">Email</label>
        <input type="email" class="form-control" name="Email" [(ngModel)]="model.Email" 
               #Email="ngModel" required pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"/>
        <div *ngIf="f.submitted && !Email.valid" class="help-block">Email is required</div>
        <div *ngIf="!pattern" class="alert alert-danger">Wrong Pattern</div>
    </div>
</form>

The div having info about error (Wrong Pattern) just sticks there on the page and nothing happens whether I enter right or wrong email. Help me out please!

If the text entered into the input is not according to the regex it should show the div containing Wrong Pattern. I dont know if I am right here too — Rehan Siddiqui
– Rehan Siddiqui, Commented Dec 10, 2016 at 16:28
Do you have the field pattern on your component? Are you updating it? — jonrsharpe
– jonrsharpe, Commented Dec 10, 2016 at 16:29
No, pattern is the attribute of html I think which checks for regex? — Rehan Siddiqui
– Rehan Siddiqui, Commented Dec 10, 2016 at 16:34

ulubeyn · Accepted Answer · 2016-12-11 20:43:26Z

You can use reactive forms and your own custom validator. Let's assume you have only email field in your form;

//html
<form [formGroup]="yourFormName" (ngSubmit)="yourSubmitMethod()">
     <div [class.has-danger]="_yourFormControlNameForEmailField.touched && _yourFormControlNameForEmailField.invalid" [class.has-success]="_yourFormControlNameForEmailField.dirty && _yourFormControlNameForEmailField.valid">
          <label for="email">Email</label>
          <input type="email" name="email" formControlName="yourFormControlNameForEmailField" [class.form-control-danger]="_yourFormControlNameForEmailField.touched && _yourFormControlNameForEmailField.invalid" [class.form-control-success]="_yourFormControlNameForEmailField.dirty && _yourFormControlNameForEmailField.valid">
     </div>
</form>

//in ts
export class YourClassName {
     yourFormName: FormGroup;
     _yourFormControlNameForEmailField = new FormControl(model.Email, [<any>EmailValidator.emailPattern]);
     constructor(private formBuilder: FormBuilder, ...){
           ...
     }

     ngOnInit(){
          //create a form group with form control(s)
          this.yourFormName= this.formBuilder.group({
               yourFormControlNameForEmailField: this._yourFormControlNameForEmailField
          });
     }

     yourSubmitMethod(){
          ...
     }
}

//EmailValidator
import { AbstractControl } from '@angular/forms';

export class EmailValidator {
    static emailPattern(c: AbstractControl): { [key: string]: any } {
        let regexp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        //if test is unsuccessful, return key(emailPattern)-value(false) pair
        return regexp.test(c.value) ? null : { emailPattern: false };
    }
}

Collectives™ on Stack Overflow

RegEx application in angular 2 form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related