Angular2 - 条件付きで作成された入力フィールドのフォーム検証

Question

私はユーザがLocalとForeignerの2つの値を選択できる単純なフォームを作成しています。ユーザーが何も選択しない場合、フォームの値はinvalidになります。ユーザーがLocalを選択すると、フォームはvalidになります。ユーザがForeignerを選択した場合は、ユーザからの入力として国が必要な新しいフィールドが表示されます。ユーザーが国入力フィールドに何も入力しないと、これはフォームinvalidになります。私は以下のようにフォームを作成しようとした

：

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {Control,ControlGroup,FormBuilder,FORM_DIRECTIVES,Validators} from 'angular2/common'; 

@Component({ 
    selector: 'app', 
    template: ` 
    <form [ngFormModel]="form" > 
    <select [ngFormControl]="nationalityCtrl" > 
     <option *ngFor="#nationality of nationalities" [value]="nationality" >{{nationality}}</option> 
    </select><br> 
    <input *ngIf="form.value.nationality == 'Foreigner'" type="text" [ngFormControl]="countryCtrl" placeholder="Country Name" /> 
    <button class="btn btn-primary" [disabled]="!form.valid" >Submit</button> 
    </form> 
    `, 
    directives: [FORM_DIRECTIVES] 
}) 
class MainApp{ 
    public nationalities = ["Foreigner","Local"]; 
    public form:ControlGroup; 
    public nationalityCtrl:Control; 
    public countryCtrl:Control; 

    constructor(private _fb:FormBuilder){ 
    var self = this; 

    this.nationalityCtrl = new Control("",Validators.compose([Validators.required])); 
    this.countryCtrl = new Control("",Validators.compose([function(control:Control){ 
     if(self.nationalityCtrl.value == "Foreigner" && !control.value){ 
     return {invalid: true}; 
     } 
    }])); 

    this.form = this._fb.group({ 
     nationality: this.nationalityCtrl, 
     country: this.countryCtrl 
    }); 
    } 
} 
bootstrap(MainApp); 

しかし、すぐに私はコンソールに次のエラーを取得するForeignerオプションを選択して：

例外：式「形式を！。 MainApp @ 6：36 'で有効です。 がチェックされた後に変更されました。以前の値： 'false'。現在値：plunker hereに私は再生産の問題は、コンソールにエラーメッセージを見ることができます

： の「本当」[！36 @ 6 MainAppにしてform.valid]。

Answer 1

あなたのバリデータは、二つのフィールドに依存するので、私は、フォーム全体のグローバルバリデータを定義しますhttps://plnkr.co/edit/Cksiv2UFbWoVJv2VwPwh?p=preview：

this.form = this._fb.group({ 
    nationality: this.nationalityCtrl, 
    country: this.countryCtrl 
}, { 
    validator: (control:Control) => { 
    var nationalityCtrl = control.controls.nationality; 
    var countryCtrl = control.controls.country; 
    if(nationalityCtrl.value == "Foreigner" && !countryCtrl.value){ 
     return {invalid: true}; 
    } 
    } 
}); 

このplunkrを参照してください。

詳細については、この質問を参照してください：予想通り

• Cross field validation in Angular2