Verwenden Sie deaktivieren mit modellgesteuerten Formular

Question

Ich versuche, die disabled in meinem modellgesteuerten Formular zu verwenden. Ich habe die folgende Form:

this.form = this.formBuilder.group({ 
    val1: ['', Validators.required], 
    val2: [{value:'', disabled:this.form.controls.val1.valid}] 
}); 

Ich erhalte eine Fehlermeldung (nicht controls von this.form finden) wahrscheinlich, weil ich this.form innen this.form bin mit.

Wie kann ich das beheben?

PS Ich habe auch versucht [disabled]='...' in meinem html hinzufügen, aber ich erhalte eine Warnung sagen, dass ich die Formbuilder verwenden sollte stattdessen

Answer 1

Ja, Sie haben Recht, dass das Problem ist, weil Sie eine Variable (this.form) referenzieren wenn es noch nicht initiiert ist. Glücklicherweise müssen Sie in Ihrer val2 Formularsteuerung nicht wirklich auf die Formulargruppe verweisen. Ihr Code kann wie folgt neu geschrieben werden:

let val1Control = this.formBuilder.control('', Validators.required); 
this.form = this.formBuilder.group({ 
    val1: val1Control , 
    val2: [{value:'', disabled: val1Control.valid}] 
}); 

jedoch dieser Block initiiert nur den disabled Wert von val2 Kontrolle ohne val1Control ‚s Gültigkeit zu überwachen. Um das zu tun, müssen Sie val1Control.statusChanges abonnieren:

let val1Control = this.formBuilder.control('', Validators.required); 
let val2Control = this.formBuilder.control({value:'', disabled: !val1Control.valid}); 
this.form = this.formBuilder.group({ 
    val1: val1Control, 
    val2: val2Control 
}) 

val1Control.statusChanges.subscribe((newStatus) => { 
    if (val1Control.valid) { 
    val2Control.enable(); 
    } else { 
    val2Control.disable(); 
    } 
}); 

Hier ist der Arbeits Plunker: http://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF