检查 ngIF Angular 11 上的无效输入

Question

代码

.ts

buildForm() {
    this.commentForm = this.fb.group({
      name: [
        '',
        [
          Validators.required,
          Validators.minLength(2),
          Validators.maxLength(25),
        ],
      ],
      comment: ['', [Validators.required]],
    });

.html

<div fxFlex *ngIf="commentForm.value.name && commentForm.value.comment">
      <mat-list fxFlex>
        <div matLine><span>{{ commentForm.value.comment }}</span></div>
        <div matLine><span><b>{{ commentForm.value.name }}</b></span></div>
      </mat-list>

上下文：我在 .ts 文件中为“名称”和“注释”编写了一个必需的验证器，但是该名称附加了另一个验证器，用于检查该名称是否有 3 个或更多字符

问题：我得到的代码（上面）主要是在名称和注释为空时隐藏 div 但是一旦用户键入 2 个字符或更少字符的名称，div出现了——我知道我在这里遗漏了一个条件，但 Angular 对我来说是相当新的，所以我不知道如何检查 ngIf 语句中的无效输入，或者是否需要为它做其他事情（然后编写一个函数附在模板上）？

我尝试过的：我尝试过将“commentForm.value.invalid”、“commentForm.value.name.invalid”和“commentForm.invalid”作为条件句的一部分，但效果不佳.

请帮忙

Answer 1

您可以显示如下相关的错误消息。

<div fxFlex *ngIf="commentForm.controls['name'].invalid && (commentForm.controls['name'].dirty || commentForm.controls['name'].touched)">
  <mat-list fxFlex>
    <div matLine *ngIf="commentForm.controls['name'].errors.required">
        Required error message here
    </div>
    <div matLine *ngIf="commentForm.controls['name'].errors.minLength">
        Min length error message here
    </div>
    <div matLine *ngIf="commentForm.controls['name'].errors.maxLength">
        Max length error message here
    </div>
  </mat-list>
</div>