在模板驱动的表单中显示多个“mat-error”验证

Question

如何在模板驱动形式中使用ng if else验证多个错误时正确显示单个错误。

<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>

Answer 1

首先，即使在模板驱动的表单上，您还需要使用类似这样的html属性来引用您的表单：<form #userForm="ngForm"> 之后，您可以检查引用表单的错误：

                <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>

Answer 2

无需检查&& ref_email.errors.email，只需将valid替换为invalid即可 方案：

<mat-error *ngIf="ref_email.invalid">
 Email is not valid
</mat-error>