angular - 如何在 Angular 中将多个字段作为一个字段进行验证？

Question

我正在构建 Angular 5 表单。我需要在我的表格(电子邮件或电话)上提供联系信息。需要电子邮件地址或电话号码，但不能同时提供两者。我将如何为这种情况创建自定义验证器？来自docs似乎验证器只负责一个控件，而我的验证器需要知道多个控件才能检查它们的所有值。

ngOnInit() {
   this.form = this.formBuilder.group({
       'name': [null, [Validators.required]],
       'email': [null, []], // A user can provide email OR phone, but
       'phone': [null, []], // both are not required. How would you do this?
   });
}

Answer 1

一个可能的解决方案是声明一个将表单本身作为参数的函数，例如:

    export function emailAndPhone() {
      return (form: FormGroup): {[key: string]: any} => {
        return (form.value.phone && form.value.email) ||
               (!form.value.phone && !form.value.email) 
                  ? { emailAndPhoneError : true } 
                  : null;
      };
    }

使用 validator extras 将验证器函数设置为您的表单定义:

ngOnInit() {
   this.form = this.formBuilder.group({
       'name': [null, [Validators.required]],
       'email': [null, []], // A user can provide email OR phone, but
       'phone': [null, []], // both are not required. How would you do this?
   }, { validator: emailAndPhone() });
}

如果您需要识别验证何时检测到无效输入，只需确保之前定义的 emailAndPhoneError 出现在表单错误列表中。像这样

*ngIf="myForm.hasError('emailAndPhoneError')" //true means invalid