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

У меня два поля
Эл. адрес и Телефон

Это несколько полей. Добавьте новый контакт с помощью кнопки «Добавить еще», поэтому я использовал Массив форм.

Но дело в том, что нужно заполнить только одно поле 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.info(form);
        return (!form.value.phone && !form.value.email) ? { isEmailOrMobile: true } : null;
    };
}

Я работал над угловым 5.

Вы можете загрузить любой из последних кодов

Abhishek Ekaanth 22.05.2019 09:37

Я обновил свой вопрос. так что проверь это

Manoj Ghediya 22.05.2019 09:41
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
2
1 015
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Возможно, вам придется использовать пользовательский валидатор.

Создайте директиву, как показано ниже:

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']) })

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

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

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

Я установил сообщение об ошибке в html " <span *ngIf = "form.hasError('atLeastOne')">Требуется электронная почта или телефон</span> ". но он не работает. можете вы помочь мне?

Manoj Ghediya 22.05.2019 10:22

вы можете распечатать все ошибки в поле как <span class = "error" *ngIf = " form.get('email').touched ||form.get('email').dirty" > {{ form.controls['email']['errors'] | json }} </span>

programoholic 22.05.2019 10:41

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

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

Другие вопросы по теме