複数のフィールドを角度で妥当性検査するにはどうすればよいですか？

Question

私はAngular 5フォームを作成しています。私は私のフォーム（電子メールまたは電話）の連絡先情報の要件を持っています。メールアドレスまたは電話番号のいずれかが必要ですが、両方ではありません。このシナリオでカスタムバリデーターを作成するにはどうすればよいですか？ docsから、バリデーターはただ1つのコントロールに責任があると思われますが、バリデーターはすべての値をチェックするために複数のコントロールを認識する必要があります。

ngOnInit() { 
    this.form = this.formBuilder.group({ 
     'name': [null, [Validators.required]], 
     'email': [null, []], // A user can provide email OR phone, but 
     'phone': [null, []], // both are not required. How would you do this? 
    }); 
} 

Answer 1

一つの可能​​な解決策は、例えば、引数としてフォーム自体を取る関数を宣言されています

export function emailAndPhone() { 
     return (form: FormGroup): {[key: string]: any} => { 
     return (form.value.phone && form.value.email) || 
       (!form.value.phone && !form.value.email) 
        ? { emailAndPhoneError : true } 
        : null; 
     }; 
    } 

はvalidatorエキストラを使って、フォーム定義に検証関数を設定します。

ngOnInit() { 
    this.form = this.formBuilder.group({ 
     'name': [null, [Validators.required]], 
     'email': [null, []], // A user can provide email OR phone, but 
     'phone': [null, []], // both are not required. How would you do this? 
    }, { validator: emailAndPhone() }); 
} 

検証が無効な入力を検出したときに認識する必要がある場合は、emailAndPhoneErrorが定義されていることを確認してください。eフォームエラーリストにarlierがあります。このように

*ngIf="myForm.hasError('emailAndPhoneError')" //true means invalid