保留错误和错误提示的显示

Question

我有这样的代码：

<mat-form-field>
    <mat-label>{{'label.name' | translate }}</mat-label>
        <input
            matInput
            [maxLength]="256"
            type="text"
            formControlName="name"
            [placeholder]="'label.name'| translate"
            [ngClass]="{'is-invalid': form.controls.name.errors }"
            autocomplete="off"
        />

        <mat-hint align="end">{{ form.controls.name?.value | inputLimit }}</mat-hint>
        <mat-error>{{form.controls.name.errors | translate}}</mat-error>
</mat-form-field>

运行正常，问题是如果我在输入上有一个错误，例如：Field is empty显示错误消息，但mat-hint隐藏。如果没有错误，则显示mat-hint。可能的原因是什么？提前进行Thx检查。

Answer 1

这是因为你在mat提示上使用了三元运算符，而错误在你的三元运算符中给出了false，试图删除三元运算符

Answer 2

我用另一种方式解决这个问题：

<mat-hint align="end">{{ form.controls.name?.value | inputLimit }}</mat-hint>
<mat-error>
   {{form.controls.name.errors | translateFormError | translate}}
   <mat-hint align="end" class="float-right">{{ form.controls.name?.value | inputLimit }}</mat-hint>
</mat-error>

Answer 3

这是材料提示的功能，它显示在mat表单域下划线以及mat-error也显示在同一位置，因此两者都会被覆盖

要使此工作符合您的要求，您需要将提示与条件一起保留在mat-form-field之外。

谢谢。