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

问题描述

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

例如，如果我有以下登录表单：

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

它可以工作，但是当我在模型中更改此值的那一天，您必须在消息中更改它。更糟糕的是，如果已本地化，则必须使用正确的值更新所有本地化。

那么，如何检索例如模板中的minLength值？这一定有可能吧？

解决方法

检查书写错误

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

您会看到这是一个带有requiredLength和actualLength的对象，因此您可以编写

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

,

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

您可以使用ngx-input-errors库以不同的语言设置一次输入错误消息，然后使用该库提供的指令在模板中自动提取并显示输入错误消息