检查ngIF Angular 11上是否存在无效输入

代码

.ts

.html

{{commentForm.value.comment}}
{{commentForm.value.name}

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

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

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

---

请提供帮助

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

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

此处显示所需的错误消息
此处显示最小长度错误消息
此处显示最大长度错误消息

类似于：

commentForm.get（'name'）。touch&&commentForm.get（'name'）。errors？。必需的

谢谢，最初它不起作用，但我对它进行了一些调整，并调整了一些值（即使“commentForm……无效到有效”），这就成功了

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

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