VM Clarity - 无法使用带有 clr-control-error 的自定义验证器答案

【问题标题】：VM Clarity - Unable to use custom validator with clr-control-errorVM Clarity - 无法使用带有 clr-control-error 的自定义验证器
【发布时间】：2018-12-27 09:01:46
【问题描述】：

如何使用 clr-control-error 显示来自自定义验证器的错误消息？我有一个自定义验证器来确认密码匹配。 required、minlength 和 maxlength 等其他验证器运行良好。我正在使用最新版本的清晰度。

signup.ts

  ngOnInit() {
    this.createSignUpForm();
  }

  createSignUpForm() {
    this.signUpForm = this.fb.group({
      password: ['', [
        Validators.required,
        Validators.minLength(4),
        Validators.maxLength(12)
      ]],
      confirmPassword: ['', Validators.required]
    }, { validator: this.passwordMatchValidator });
  }

  passwordMatchValidator(g: FormGroup) {
    return g.get('password').value === g.get('confirmPassword').value ? null 
     : {'mismatch' : true };
  }

signup.html

        <clr-password-container>
            <label>Password</label>
            <input clrPassword formControlName="password"  />
            <clr-control-error *clrIfError="'required'">This password is required!</clr-control-error>
            <clr-control-error *clrIfError="'minlength'">It must be at least 4 characters!</clr-control-error>
            <clr-control-error *clrIfError="'maxlength'">It must be less than 12 characters!</clr-control-error>
        </clr-password-container>
        <clr-password-container>
           <label> Confirm Password</label>
           <input clrPassword formControlName="confirmPassword"/>
           <clr-control-error *clrIfError="'required'">Confirm Password is required!</clr-control-error>
           <clr-control-error *clrIfError="'mismatch'">Password Confirmation must match password</clr-control-error>
        </clr-password-container>

【问题讨论】：

标签： angular vmware-clarity

【解决方案1】：

您将验证器放在表单级别而不是表单控件级别，这意味着它永远不会触发该控件。我已将您的示例重新组织为您希望使用 confirmPassword 控件上的自定义验证器的内容。

https://stackblitz.com/edit/clarity-password-confirm-validator?file=src/app/app.component.html

【讨论】：

这很有道理，谢谢！