Angular 如何在模板中检索反应式表单验证程序的参数？

我已经开始在表单中使用反应表单，但有些事情困扰着我。其中之一是，如果我想显示相关的错误消息，我需要向用户提供一些信息以更正其错误

举例来说，如果我有此登录表单：

 loginForm = this.formBuilder.group({
    email: new FormControl(
      '',
      Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])
    ),
    password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(8)])),
  });

对于密码，我需要给用户密码长度至少为8个字符

我完全可以在错误消息中硬编码：

  <div
    class="error-message alert alert-danger"
    *ngIf="loginForm.get('password').hasError('minLength')"  >
    <ion-text color="danger" class="text">
      <ion-icon class="icon" name="alert-outline"></ion-icon>
       Password has to be at least 8 characters long
    </ion-text>
  </div>

密码长度必须至少为8个字符

这是可行的，但当我在模型中更改此值时，您必须在消息中更改它。更糟糕的是，如果是本地化的，则必须使用正确的值更新所有本地化

---

那么，例如，如何在我的模板中检索minLength值呢？这必须是可能的，对吗？

检查写入错误

{{loginForm.get('password')?.errors|json}})

您将看到这是一个具有

所需长度

和

实际长度

的对象，因此您可以编写

Password has to be at least 
    {{loginForm.get('password')?.errors?.minlength.requiredLength}} 
             characters long

---

与其为每个输入编写重复的错误消息，不如使用库为您处理它

---

您可以使用library以不同的语言设置输入错误消息一次，然后使用library提供的指令自动提取并显示模板中的输入错误消息，这看起来非常有趣！但有两个问题：有没有办法使用ngx翻译库以外的同一个文件？此外，我不使用角材料（离子），有没有办法使用其他材料，而不是mat错误？此库与i18n库不匹配。并且需要它自己的配置。该指令在任何HTML元素中都可用，但在用户触摸输入后，需要添加*ngIf=“userForm.get（'name'）.touch”以显示错误消息。文件对其进行了解释。只需找到简单的输入标题这很遗憾，我需要通过一个只支持一种文件格式的工具将我的本地化文件提供给外部团队