Как проверить поля электронной почты или телефона в массиве формы в угловых 5?

Question

У меня есть два поля
Электронная почта & Телефон

Это несколько полей. Добавить новый контакт с помощью кнопки «Добавить еще», чтобы я использовал FormArray .

Но дело в том, что требуется только одно поле для электронной почты или телефона
Итак, как проверить одно поле в 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;
    };
}

Я работал над угловым 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']) })

Используя эту директиву, вы можете проверить, действительны ли они или нет.

Это можно использовать и в любых других формах. Вот пример рабочего примера валидатора: Рабочая демонстрация как минимум одного валидатора

Вы можете изменить это в соответствии с вашими требованиями.

Answer 2

Сортировка может состоять в том, чтобы добавить как проверку с изменением в одной из форм, которую вы можете отключить, так и наоборот.

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');