Displaying multiple 'mat-error' validation in template driven form

Question

How to display single error correctly on validating multiple errors using ng if else in template driven form.

<form>
    <mat-card>
               <mat-card-content>
            <mat-form-field>
            
                <input id="email" name="email" #ref_email="ngModel" matInput type="email" email placeholder="Email" [(ngModel)]="email" required>
                
                <mat-error *ngIf="!ref_email.valid && ref_email.errors.required">
                    Email is required
                </mat-error>
                
                <mat-error *ngIf="!ref_email.valid && ref_email.errors.email">
                    Email is not valid
                </mat-error>
                
            </mat-form-field>
        </mat-card-content>        
    </mat-card>
</form>

MarcoLe · Accepted Answer · 2019-08-08 06:04:56Z

4

First of all even on template driven forms you need to reference your form with a html property something like this: <form #userForm="ngForm">
After that you can check to the errors of the referenced form:

                <mat-error *ngIf="userForm.controls['email']?.errors?.required">
                    Email is required.
                </mat-error>

                <mat-error *ngIf="userForm.controls['email']?.errors?.email">
                    Email is not valid.
                </mat-error>

edited Aug 8, 2019 at 6:04

answered Sep 13, 2018 at 8:24

MarcoLe

2,5498 gold badges42 silver badges80 bronze badges

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

1 Comment

Andre Elrico Over a year ago

first line *ngIf="*ngIf="

Collectives™ on Stack Overflow

Displaying multiple 'mat-error' validation in template driven form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related