Угловой 2 валидатор MDF, требующий, по крайней мере, одного из двух полей

Question

У меня есть два поля ввода: адрес электронной почты и телефон, если пользователь вводит ввод по электронной почте, тогда входной телефон не требуется, и наоборот. По крайней мере, одно из полей требуется одновременно. У меня есть модель, основанная на моделях, и я пытаюсь написать для нее специальную функцию валидатора. До сих пор я получил: В моей validator.ts:

import { FormGroup, FormControl } from '@angular/forms'; 

export function requiredOptional(emailVal: string, phoneVal: string) { 
    return (group: FormGroup): {[key: string]: any} => { 
    let email = group.controls[emailVal]; 
    let phone = group.controls[phoneVal]; 

    if (!email.value|| !phone.value) { 
     return { 
     isRequired: true 
     }; 
    } 
    } 
} 

В моих testForm.component.ts:

export class TestFormComponent{ 
testForm: FormGroup; 

    constructor(public fb: FormBuilder) { 
    this.testForm= fb.group({ 
    email: ['', emailValidator], 
    phone: ['', phoneValidator], 
    password: ['', Validators.required], 
    confirmPassword: ['', Validators.required] 
    }, {validator: matchingPasswords('password', 'confirmPassword')}, 
    {validator: requiredOptional('email', 'phone')} 
) 
    } 
    onSubmit(value: Object): void { 
    console.log(value); 
} 
} 

и в моем testForm.component.html:

<form [formGroup]="testForm" novalidate (ngSubmit)="testForm.valid && onSubmit(testForm.value)"> 
    ....... 
    <input type="email" placeholder="Email*" formControlName="email"> 
       <div class="form-text error" *ngIf="testForm.controls.email.touched"> 
        <div *ngIf="testForm.hasError('isRequired')">Email or Phone is required.</div> 
        <div *ngIf="testForm.controls.email.hasError('invalidEmail')">Email is invalid.</div> 
       </div> 
    ....... 
    <input type="text" placeholder="Mobile Number*" formControlName="phone"> 
       <div class="form-text error" *ngIf="testForm.controls.phone.touched"> 

        <div *ngIf="testForm.hasError('isRequired')">Email or Phone is required.</div> 
        <div *ngIf="testForm.controls.phone.hasError('invalidPhone')">Phone is invalid.</div> 
       </div> 
....... 
<button [disabled]="!testForm.valid" type="submit" class="btn btn-primary pull-right">Sign up</button> 
     </form> 

Но это не работает, я получаю ошибка в testForm.component.ts: Supplied parameters do not match any signature of call targets

Answer 1

Вы можете определить несколько функций валидирующего сочинения как следующее:

export class TestFormComponent{ 
testForm: FormGroup; 

    constructor(public fb: FormBuilder) { 
    this.testForm= fb.group({ 
    email: ['', emailValidator], 
    phone: ['', phoneValidator], 
    password: ['', Validators.required], 
    confirmPassword: ['', Validators.required] 
    }, {validator: Validators.compose([matchingPasswords('password', 'confirmPassword'), requiredOptional('email', 'phone')]}) 
    } 
    onSubmit(value: Object): void { 
    console.log(value); 
} 
} 

Фокуса на следующих изменениях:

{validator: Validators.compose([matchingPasswords('password', 'confirmPassword'), requiredOptional('email', 'phone')]} 

Вместо установки matchingPasswords валидатора, мы можем установить массив проверки функций с помощью Validators.compose