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

Question

我已经开始将 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.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>

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

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

Answer 1

检查写入错误

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

你会看到这是一个有requiredLength和actualLength的对象，所以你可以写

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

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

How to retrieve arguments of Reactive Form validators in the template?

angular

angular-reactive-forms

angular-validation