2016-11-30 11 views
7

特定のフィールドで条件付きで必要な検証を作成しようとしています。これを返すことで、Validators.required関数を呼び出すことができますが、これはうまくいかないようです。これをどうやって行うのですか?ここに私のコード:Angular2:条件付きで必要な検証

private _ansat: AbstractControl = new FormControl('', Validators.required); 
private _helbred: AbstractControl = new FormControl('', Validators.compose([this.useValidateIfRadio(this._ansat, 0, Validators.required)])); 


constructor(private _fb: FormBuilder) { 
    this.myForm = this._fb.group({ 
      ansat: this._ansat, 
      helbred: this._helbred 
     }); 
} 

useValidateIfRadio (c: AbstractControl, n: number, v) { 
     return function (control) { 
      return new Promise(resolve => { 
      // this.msg = ansatControl.value; 
      console.log(v); 
       if (c.value === n) { 

        resolve(v); 
       } 
       else { 
        resolve(null); 

       } 
      }); 
     }; 
    }; 

私は助けていただきありがとうございます。

+0

あなたがこの問題を解決しましたか?私は答えを追加しましたが、あなたが同じ方法で(またはより良い方法で)それを解決するなら、好奇心が強いです – Erex

+1

私はここに示すように再利用可能なカスタムバリデーターで同様の問題を解決しました:[条件付](http:// stackoverflow。 com/questions/38204812/angular2-forms-valid-with-interrelated-fields/40416197#40416197) –

+0

ああ、天才に見えます!私はあなたのソリューションを次にテストします! – Erex

答えて

20

同様の問題がありましたが、回答が見つかりませんでした。誰もこれにまだ答えてくれていないので、私は自分の問題をどのように解決したか、同じ解決策を使って問題を解決する方法の例を提供します。

例:(電話番号は電子メールが設定されていない場合にのみ必要です)

export class UserComponent implements OnInit { 

userForm: FormGroup; 

constructor(private fb: FormBuilder) {} 

ngOnInit() { 

    //Create my userForm and and add initial validators 
    this.userForm = this.fb.group({ 
     username: [null, [Validators.required]], 
     name: [null, [Validators.required]], 
     email: [], 
     phoneNumber: [null, [Validators.minLength(4)]], 
    }); 

    //Listen to email value and update validators of phoneNumber accordingly 
    this.userForm.get('email').valueChanges.subscribe(data => this.onEmailValueChanged(data)); 
} 


onEmailValueChanged(value: any){ 
    let phoneNumberControl = this.userForm.get('phoneNumber'); 

    // Using setValidators to add and remove validators. No better support for adding and removing validators to controller atm. 
    // See issue: https://github.com/angular/angular/issues/10567 
    if(!value){ 
     phoneNumberControl.setValidators([Validators.required, Validators.minLength(4)]); 
    }else { 
     phoneNumberControl.setValidators([Validators.minLength(4)]); 
    } 

    phoneNumberControl.updateValueAndValidity(); //Need to call this to trigger a update 
} 

} 

だからあなたの場合には、あなたが私の電子メールリスナーに等しい「_ansat」にChangeListenerを追加する必要がありますし、必要なaddがそれに応じて "_helbred"になります。

2

ただ、フィールドのバリデータを追加します。

if(some_logic) { 
this.your_form.get('field_name').setValidators([Validators.required]); 
}