时间戳

首页 > 解决方案 > 角材料场中未显示垫子错误

angular - 角材料场中未显示垫子错误

问题描述

我想在表格中显示错误。我正在使用角度材料输入：

<mat-form-field appearance="fill" class="phone-num">
    <input [placeholder]="'PROFILE.MOBILE_NUMBER' | translate" class="pointer" type="text" matInput
        [(ngModel)]="phoneNumber" (keyup)="onPhoneNumberChange()" [readonly]="isReadOnly" id="phoneNumberInput">

    <mat-error *ngIf="f.mobileNumber.hasError('validCountryPhone')"
        [translate]="'SHARED_VALIDATE.NOT_VALID_PHONENUMBER'"
        [translateParams]="{ value: 'PROFILE.MOBILE_NUMBER' | translate }">
    </mat-error>
</mat-form-field>

当输入无效时，它不会显示错误，但是当我更改mat-error它时div会显示错误。

什么问题？我该如何解决这个问题/？？？

标签： angulartypescriptangular-material

解决方案

经过一番研究，我发现这篇文章解释说：

我们可以从中了解到，只有当表单域（控件）说它有错误时，它才会使用嵌入来显示 mat-error。

所以我们可以假设 mat-error 需要一个 formControl 来检查 formField 是否有错误。在您的代码中，您需要添加输入：

 <mat-form-field appearance="fill" class="phone-num">
    <input [placeholder]="'PROFILE.MOBILE_NUMBER' | translate" class="pointer" type="text" matInput
        [(ngModel)]="phoneNumber" (keyup)="onPhoneNumberChange()" [readonly]="isReadOnly" id="phoneNumberInput" [formControlName]="mobileNumber"> 

    <mat-error *ngIf="f.mobileNumber.hasError('validCountryPhone')"
        [translate]="'SHARED_VALIDATE.NOT_VALID_PHONENUMBER'"
        [translateParams]="{ value: 'PROFILE.MOBILE_NUMBER' | translate }">
    </mat-error>
</mat-form-field>

假设您的 formControl 的名称是mobileNumber.

推荐阅读