Angular 角度窗体一次显示一条错误消息

我使用Angular 6，我有一个表单，里面有两个字段Name和Display Name。我在两个字段上都进行了3-4次验证，如必填字段、模式字段、最小长度字段和最大长度字段。我希望一次只显示一条错误消息。如何做到这一点

下面是示例代码

<mat-form-field required>
            <label for="attribute_name">Name</label>
            <input type="text"
                   required
                   matInput
                   [(ngModel)]="attribute.name"
                   name="name"
                   id="attribute_name"
                   #nameInput="ngModel"
                   [ngClass]="{'form-validation--error-border' : (nameInput?.errors && (nameInput?.dirty || nameInput?.touched)) || false}"
                   [minlength]="3"
                   [maxlength]="63"
                   [pattern]="[some pattern]" />
            <ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
                <li *ngIf="nameInput.errors.required">Name is required</li>
                <li *ngIf="nameInput.errors.minlength">Minimum length should be 3.</li>
                <li *ngIf="nameInput.errors.pattern">It should start with letter.</li>
            </ul>
        </mat-form-field>

名称

名称为必填项
最小长度应为3
应该以字母开头

试着这样做：

模板：

<ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
  <li [innerHtml]="getErrorMessage(nameInput.errors)"></li>
</ul>

试着这样做：

模板：

<ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
  <li [innerHtml]="getErrorMessage(nameInput.errors)"></li>
</ul>

---

你可以试试ngTemplate*ngIf，其他的

<ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
   <li *ngIf="nameInput.errors.required; else minLengthElem;">Name is required</li>
</ul>
   <ngTemplate #minLengthElem>   
    <li *ngIf="nameInput.errors.minlength; else patternElem;">Minimum length should be 3.</li>
  </ngTemplate>
  <ngTemplate #patternElem>
    <li *ngIf="nameInput.errors.pattern">It should start with letter.</li>
  </ngTemplate>

名称是必需的

最小长度应为3
应该以字母开头

您可以尝试ngTemplate*ngIf，或者

<ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
   <li *ngIf="nameInput.errors.required; else minLengthElem;">Name is required</li>
</ul>
   <ngTemplate #minLengthElem>   
    <li *ngIf="nameInput.errors.minlength; else patternElem;">Minimum length should be 3.</li>
  </ngTemplate>
  <ngTemplate #patternElem>
    <li *ngIf="nameInput.errors.pattern">It should start with letter.</li>
  </ngTemplate>

名称是必需的

最小长度应为3
应该以字母开头

而不是使用

nameInput.errors.minlength

您应该像这样使用

hasrerror

-

nameInput.hasError('min')

---

而不是使用

nameInput.errors.minlength

您应该像这样使用

hasrerror

-

nameInput.hasError('min')

---

我会使用ngx valdemort:。免责声明：我是作者。我会使用ngx valdemort:。免责声明：我是作者。直接从模板端调用方法是一种好方法吗？它总是会一次又一次地调用以检查最终导致性能问题的更新。从模板或TS中评估某个内容是相同的，没有性能问题，即使您在模板中写入相同的内容，也会计算保存逻辑，在其中写入TS只会使其变得更简单为什么

*ngIf=“required”

？为什么要使用innerHTML而不是简单而安全的插值？@JBNizet

*ngIf=“required”

是一个错误。@AdritaSharma不，我想是有区别的，尝试在带有控制台的模板中添加属性绑定中的简单方法，并在单击按钮时执行相同的操作。您将看到差异。直接从模板端调用该方法是一种好方法吗？它总是会一次又一次地调用以检查最终导致性能问题的更新。从模板或TS中评估某个内容是相同的，没有性能问题，即使您在模板中写入相同的内容，也会计算保存逻辑，在其中写入TS只会使其变得更简单为什么

*ngIf=“required”

？为什么要使用innerHTML而不是简单而安全的插值？@JBNizet

*ngIf=“required”

是一个错误。@AdritaSharma不，我想是有区别的，尝试在带有控制台的模板中添加属性绑定中的简单方法，并在单击按钮时执行相同的操作。您将看到差异。它有错误，这就是它显示3条错误消息的原因，但我只想显示一条优先级更高的错误消息。它有错误，这就是它显示3条错误消息的原因但我只想显示一条优先级更高的错误消息。我使用了这种方法。ThanksI使用了这种方法。谢谢