Question

我正在尝试使用清晰度设计实现自定义验证器，该设计器比较两个表单控制值，如果第一个表单控制值大于第二个表单控制值，则返回true。我该怎么办？

Answer 1

发布的示例已接近运行，但需要进行一些更改才能使其正常运行。确保在组验证功能上返回的错误消息与模板中定义的错误消息匹配。在我的示例中，错误消息为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 };
}

这是完全可以正常工作的堆栈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

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

1 个答案: