Angular2：2フィールドの共通検証としてValidators.requiredを設定する

Question

私はAngular2 ForumBulderを使用してフォームを作成し、バリデーションを追加しています。コンポーネントのサンプルコードの下に

this.OtpForm = this._fb.group({ 
    otpInput: this._fb.group({ 
     otpInput1: ['', Validators.required], 
     otpInput2: ['', Validators.required], 
     otpInput3: ['', Validators.required], 
    }, { validator: this.numericValidator }) 
}); 

これで正常に動作します。しかし、質問はどのようにカスタムバリデーターnumericValidatorのようにすべてのフィールドに共通のValidators.requiredする方法ですか？

Answer 1

あなたは、たとえば、

validateAllRequired(g: FormGroup) { 
    let ctrls = g.controls; 
    let keys = Object.keys(ctrls); 
    let valid = true; 
    keys.forEach((key) => { 
     let ctrl = ctrls[key]; 
     if (ctrl.value.trim() == '') { 
     valid = false; 
     } 
    }); 
    return valid ? null : { 
     validateAllRequired: { 
     valid: valid 
     } 
    }; 
} 

をotpInputグループに1つの以上のカスタムバリデータを作成し、これに追加することができます：

は

otpInput: this._fb.group({ 
    otpInput1: [''], 
    otpInput2: [''], 
    otpInput3: [''], 
}, { validator: Validators.compose([this.numericValidator, this.validateAllRequired]) }) 

がValidators.composeを使用してバリデータを組み合わせて（）

Validators.compose([...]) 

非同期検証ツール用の

を使用

Validators.composeAsync([...])