У меня два поля
Эл. адрес и Телефон
Это несколько полей. Добавьте новый контакт с помощью кнопки «Добавить еще», поэтому я использовал Массив форм.
Но дело в том, что нужно заполнить только одно поле 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.
Я обновил свой вопрос. так что проверь это
Возможно, вам придется использовать пользовательский валидатор.
Создайте директиву, как показано ниже:
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> ". но он не работает. можете вы помочь мне?
вы можете распечатать все ошибки в поле как <span class = "error" *ngIf = " form.get('email').touched ||form.get('email').dirty" > {{ form.controls['email']['errors'] | json }} </span>
Типичным способом было бы добавить как проверку с изменением в одной из форм, так и отключить другую, и наоборот.
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');
Вы можете загрузить любой из последних кодов