Angular2 - Koşullu olarak oluşturulmuş giriş alanında Form Doğrulama

Question

Kullanıcının iki olası değeri yani Local ve Foreigner seçebileceği basit bir form oluşturuyorum. Kullanıcı hiçbir şey seçmezse invalid formunun değerini yapar. Kullanıcı Local'u seçerse, form valid olur. Kullanıcı Foreigner'u seçerse, ülkeyi de gerekli olan kullanıcı girişi olarak almak için yeni bir alan belirir. Kullanıcı ülke giriş alanında hiçbir şey girmezse, bu form invalid şeklini alır. Ben aşağıdaki formu oluşturarak denedi

:

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); 

Ama en kısa sürede ben konsolda aşağıdaki hatayı alıyorum Foreigner seçeneği olarak:

İSTİSNA: İfade 'formu!. MainApp @ 6: 36 'da geçerli olan kontrolünden sonra değişmiştir. Önceki değer: 'yanlış'. Geçerli değer: Sana konsolda hata mesajını görebilirsiniz plunker here sorunu üretilen yeniden

: yılında 'gerçek' [! 36 @ 6 MainApp içinde form.valid]. senin doğrulayıcı iki alana bağlı olduğu için

Answer 1

Bütün form için küresel bir doğrulayıcı tanımlarsınız: 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}; 
    } 
    } 
}); 

bu plunkr bakın.

fazla ayrıntı için bu soruya bakın: beklendiği gibi

• Cross field validation in Angular2