Angular2は、共有フォームコントロールを使用したクロスフィールド検証を有効にします

Question

私はユースケースを実装するために多くの方法を試しましたが、解決策はありませんでした。私が達成しようとしています何

は（angular2に反応性のフォームを使用して）である2つのクロスフィールド検証を持つフォーム：

• B & C

の& B

検証の検証

A & BとB & C FormControlsへの参照を持つ2つのFormGroupを作成しようとしました。各FormGroupには、その子のみを検証する独自のバリデータがあります。共有FormControlが問題であるため、値が変更されると1つのバリデータだけがトリガされます。

まず試し：

this.controlA = new FormControl(); 
this.controlB = new FormControl(); 
this.controlC = new FormControl(); 

this.form = new FormGroup({ 
ab: new FormGroup({ 
controlA: this.controlA, 
controlB: this.controlB 
}, this.validateAB), 
bc: new FormGroup({ 
controlB: this.controlB, 
controlC: this.controlC 
}, this.validateBC); 

// Validators methods returns a ValidatorFn (which returns null if everything fine or an error object, if validation fails) 

が正しく動作しません。その作品

this.controlA = new FormControl(); 
this.controlB = new FormControl(); 
this.controlC = new FormControl(); 

this.form = new FormGroup({ 
ab: new FormGroup({ 
controlA: this.controlA, 
controlB: this.controlB 
}), 
bc: new FormGroup({ 
controlB: this.controlB, 
controlC: this.controlC 
}); 


this.setABValidator(<FormGroup>this.form.get('ab')); 
this.setBCValidator(<FormGroup>this.form.get('bc')); 

// similar für setBCValidator which triggers this.validateBC(form) 
private setABValidator(form: FormGroup): void { 
    if (form) { 
     const aCtrl = form.get('controlA'); 
     const bCtrl = form.get('controlB'); 
     if (aCtrl && bCtrl) { 
     aCtrl.valueChanges.subscribe((value: any) => { 
      this.validateAB(form); 
     }); 
     bCtrl.valueChanges.subscribe((value: any) => { 
      this.validateAB(form); 
     }); 
     } 
    } 
    } 

    private validateAB(formGroup: FormGroup): void { 
    const aCtrl = formGroup.get('controlA'); 
    const bCtrl = formGroup.get('controlB'); 
    const errorKey = 'ERR.AB'; 
    if (aCtrl && bCtrl) { 
     if (condition fails) { 
     ThisCLass.setValidationError(aCtrl , errorKey); 
     ThisCLass.setValidationError(bCtrl , errorKey); 
     } else { 
     ThisCLass.removeValidationError(aCtrl, errorKey); 
     ThisCLass.removeValidationError(bCtrl, errorKey); 
     formGroup.updateValueAndValidity(); 
     } 
    } 
    } 

が、フォームの全体的な妥当性が正しくありません：

は2を試してみてください。 あなたはそれが良い方法で可能だと思いますか？

Answer 1

2つのフォームグループが必要な理由がわかりません。両方のバリデーションをマージしているものを使用しますか？

これは、ジョブを実行する必要があります。

this.form = new FormGroup({ 
controlA: this.controlA, 
controlB: this.controlB, 
controlC: this.controlC 
}, Validators.compose([this.validateAB, this.validateBC]);