显示多个错误＆＃39;模板驱动形式的验证

Question

如何在使用ng if if else in template driven form验证多个错误时正确显示单个错误。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

无需检查＆amp;＆amp; ref_email.errors.email ，只需将无效替换为有效 解决方案：

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