Reactive forms angular show error for pattern in angular

Question

I have reactive form like this

this.form = this.formBuilder.group({
      email: ['', [
        Validators.required,
        Validators.maxLength(120),
        Validators.pattern('^[^\\s@]+@[^\\s@]+\\.[^\\s@]{1,}$')
      ]],
    });

Now I need to display error for different error, like this

<div class="invalid-feedback" *ngIf="form.controls.email.errors.pattern">THIS EMAIL NOT VALID</div>

But I got error Cannot read property 'pattern' of null Does anybody had similar problem with showing error for pattern?

Gopal Zadafiya · Accepted Answer · 2020-07-15 14:08:37Z

4

You either fail or pass the validation. when you pass the validation form.controls.email.errors does not exist.

To overcome that: you need to replace errors with errors? as below:

<div class="invalid-feedback" *ngIf="form.controls.email.errors?.pattern">THIS EMAIL NOT VALID</div>

edited Jul 15, 2020 at 14:08

answered Jul 15, 2020 at 13:51

Gopal Zadafiya

2912 silver badges12 bronze badges

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

1 Comment

Miomir Dancevic Over a year ago

ERROR TypeError: Cannot read property 'pattern' of null

Akhil · Accepted Answer · 2020-07-15 14:11:11Z

-1

Please try this ::

<div class="invalid-feedback" *ngIf="form.get('email').hasError('pattern')">THIS EMAIL NOT VALID</div>

answered Jul 15, 2020 at 14:11

Akhil

1,46310 silver badges19 bronze badges

Collectives™ on Stack Overflow

Reactive forms angular show error for pattern in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related