使用清晰度设计的自定义验证不起作用

Question

我正在尝试使用比较两个表单控件值的清晰度设计来实现自定义验证器，如果第一个表单控件值大于第二个，returns 为真。我该怎么做？

Answer 1

发布的示例接近工作，但需要更改一些内容才能使其工作。确保在您的组验证函数中，错误消息 returns 与模板中定义的相同错误消息相匹配。在我的示例中，错误消息是 passwordMissmatch.

由于这是一个组验证器，clr-control-error 不会提取组错误消息（据我所知），它只会显示单个控制错误。要显示组错误，请收听根表单组上的错误。

<form clrForm [formGroup]="form" (ngSubmit)="submit()">
  <clr-password-container>
    <label>Password</label>
    <input clrPassword formControlName="password" />
    <clr-control-error>Password Required</clr-control-error>
  </clr-password-container>

  <clr-password-container>
    <label>Confirm Password</label>
    <input clrPassword formControlName="confirmPassword" />
  </clr-password-container>

  <clr-alert *ngIf="form.errors?.passwordMissmatch && form.controls.confirmPassword.touched" clrAlertType="danger" [clrAlertClosable]="false">
    Passwords must match.
  </clr-alert>

  <button class="btn btn-primary">Submit</button>
</form>

form: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    password: ['', [Validators.required]],
    confirmPassword: ['']
  }, { validators: this.checkPasswords });
}

checkPasswords(group: FormGroup) {
  return group.controls.password.value === group.controls.confirmPassword.value ? null : { passwordMissmatch: true };
}

这是完全可用的 stackblitz https://stackblitz.com/edit/clarity-oshxxw

您还可以创建一个可重用性更高的通用组验证器，它可以通过传入控件名称来比较任意两个输入。示例：

...
new FormGroup({
  password: new FormControl('', [Validators.required, Validators.minLength(6)]),
  confirm: new FormControl('', Validators.required)
}, matchingInputsValidator('password', 'confirm', 'missmatch'))
...

export function matchingInputsValidator(firstKey: string, secondKey: string, errorName: string) {
  return function (group: FormGroup): ValidationErrors | undefined {
    if (group.controls[firstKey].value !== group.controls[secondKey].value) {
      return {
        [errorName]: true
      };
    }
  };
}

您可以在这里找到更详细的解释：https://coryrylan.com/blog/build-accessible-forms-with-angular

使用清晰度设计的自定义验证不起作用

Custom Validation using clarity design not working

angular

vmware-clarity