如何在 angular 5 中验证表单数组中的电子邮件或 phone 字段？

Question

我有两个字段
电子邮件 & Phone

它是多个字段。使用添加更多按钮添加新联系人所以我使用了 FormArray.

但重点是只有一个字段是必填的 email 或 phone
那么如何在FormArray中验证一个字段是必需的？

下面是我最新的代码。

this.form = this.fb.group({
     contact: this.fb.array([this.addNewContact()]),
});

public addNewContact() {
    return this.fb.group({
        department: [''],
        phone: [''],
        email: [
            '',
            Validators.compose([
                Validators.pattern(/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$/)
            ])
        ],
    },
    this.emailOrPhone());
}

public emailOrPhone() {
    return (form: FormGroup): { [key: string]: any } => {
        console.log(form);
        return (!form.value.phone && !form.value.email) ? { isEmailOrMobile: true } : null;
    };
}

我已经完成了 angular 5.

Answer 1

您可能必须使用自定义验证器。

创建如下指令：

import {
    FormGroup,
    ValidationErrors,
    ValidatorFn,
    Validators,
  } from '@angular/forms';

  export const atLeastOne = (validator: ValidatorFn, controls:string[] = null) => (
    group: FormGroup,
  ): ValidationErrors | null => {
    if(!controls){
      controls = Object.keys(group.controls)
    }

    const hasAtLeastOne = group && group.controls && controls
      .some(k => !validator(group.controls[k]));

    return hasAtLeastOne ? null : {
      atLeastOne: true,
    };
  };

formBuilder 应如下所示：

return this.fb.group({
  department: [''],
        phone: [''],
        email: [
            '',
            Validators.compose([
                Validators.pattern(/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$/)
            ])
        ],
}, { validator: atLeastOne(Validators.required, ['email','phone']) })

使用此指令，您可以检查它们是否有效。

这也可以重复用于任何其他形式。这是验证器的示例工作示例： Working demo of atleast one validator

您可以根据自己的需要进行修改。

Answer 2

一种排序方法是，在其中一种形式中添加验证和更改，您可以禁用另一种形式，vice-versa。

public addNewContact() {
return this.fb.group({
    department: [''],
    phone: ['', Validators.compose([Validators.required])],
    email: [
        '',
        Validators.compose([Validators.required,
            Validators.pattern(/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$/)
        ])
    ],
},

}

然后监控每个字段的变化并相应地删除验证

 this.form.get('phone').removeValidator('required');

或

this.form.get('email').removeValidator('required');

如何在 angular 5 中验证表单数组中的电子邮件或 phone 字段？

How to validate email or phone fields in form array in angular 5?

angular

angular5