如何在 Angular 中验证多个字段为一个字段？答案

【问题标题】：How do validate multiple fields as one in Angular?如何在 Angular 中验证多个字段为一个字段？
【发布时间】：2018-06-05 12:58:17
【问题描述】：

我正在构建一个 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?
   });
}

【问题讨论】：

您将为每个控件使用相同的自定义验证器，但您将使用对每个控件的引用并在使用其中一个或另一个时返回 true。这是一个很好的例子：stackoverflow.com/questions/43487413/… 使用相同的想法来验证密码。尽管如此，还是会检查两个表单控件以创建组验证器。
尚未完全正常工作，请尝试增强此功能：stackblitz.com/edit/angular-9effym?file=app%2Fapp.component.ts

标签： angular typescript angular-forms

【解决方案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

【讨论】：

那么 emailAndPhoneError 是从哪里来的？
{ emailAndPhoneError : true } 是 emailAndPhone() 函数的返回值。只有当你的条件无效时才返回，否则返回null。
@DanielC。是的，这将是一个很好的起点。谢谢。