How to properly implement custom regex validator for reactive form in Angular 6?

Question

I am using angular 6. I am trying to validate an email by using regular expression pattern but am not able. Problem is when I am trying these code to validate. Below error message is shwoing:

ReactiveFormComponent.html:12 ERROR TypeError: Cannot read property 'pattern' of null

//ts file

   constructor(private fb: FormBuilder) {
   this.personForm = fb.group({
  'emailAddress': ['', Validators.compose ([Validators.required, 
   Validators.pattern(this.emailPattern)])],
});
}

// html file

<mat-form-field fxFlex>
  <input matInput placeholder="Email" formControlName="emailAddress">
  <mat-error *ngIf="personForm.controls['emailAddress'].errors.pattern">
    Invalid Email.
  </mat-error>
</mat-form-field>

Can you please share the value of emailPattern.

ibenjelloun
– ibenjelloun

2018-05-14 14:29:19 +00:00
Commented May 14, 2018 at 14:29 — ibenjelloun
– ibenjelloun, Commented May 14, 2018 at 14:29
i have solved my problem. thanks@narm

monir tuhin
– monir tuhin

2018-05-14 16:12:52 +00:00
Commented May 14, 2018 at 16:12 — monir tuhin
– monir tuhin, Commented May 14, 2018 at 16:12

hiper2d · Accepted Answer · 2018-05-14 15:45:22Z

2

This question mark fixes your problem:

*ngIf="personForm.controls['emailAddress'].errors?.pattern"

For valid input content the errors property is null. And there is no the pattern property in null indeed. You can see this if add a value changes listener and log the errors property value for a different input content:

ngOnInit() {
  this.personForm.get('emailAddress').valueChanges.subscribe(_ => {
    console.log(this.personForm.get('emailAddress').errors);
  });
}

Here is a stackblitz example

answered May 14, 2018 at 15:45

hiper2d

2,9141 gold badge20 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to properly implement custom regex validator for reactive form in Angular 6?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related