Deaktivieren Eingabefelder in reaktiver Form

Question

Ich habe schon versucht, dem Beispiel anderer Antworten von hier zu folgen, und es ist mir nicht gelungen!

Ich habe eine reaktive Form (dh dynamisch) erstellt und möchte einige Felder zu jeder beliebigen Zeit deaktivieren. Meine Form Code:

this.form = this._fb.group({ 

       name: ['', Validators.required], 
       options: this._fb.array([]) 

      }); 

const control = <FormArray>this.form.controls['options']; 
control.push(this._fb.group({ 

         value: [''], 

       })); 

mein html:

<div class='row' formArrayName="options"> 
    <div *ngFor="let opt of form.controls.options.controls; let i=index"> 
     <div [formGroupName]="i"> 
      <select formArrayName="value"> 
       <option></option> 
       <option>{{ opt.controls.value }}</option> 
      </select> 
     </div> 
    </div> 
</div> 

I reduziert den Code zu erleichtern. Ich möchte das Feld der Typauswahl deaktivieren. Ich habe versucht, folgendes zu tun:

form = new FormGroup({ 
    first: new FormControl({value: '', disabled: true}, Validators.required), 
}); 

funktioniert nicht! Hat jemand einen Vorschlag?

Answer 1

Wenn Sie first (Formularsteuerung) deaktivieren möchten, können Sie die folgende Anweisung verwenden.

this.form.first.disable();

Answer 2

name: [{value: '', disabled: true}, Validators.required], 
name: [{value: '', disabled: this.isDisabled}, Validators.required], 

oder

this.form.controls['name'].disabled(); 

Answer 3

Achten Sie, wenn Sie für Zustand eines Formulars mit Variable erstellen und versuchen, seine später zu ändern, wird es nicht funktionieren, das heißt wird das Formular nicht ändern.

Zum Beispiel

this.isDisabled = true; 

this.cardForm = this.fb.group({ 
    'number': [{value: null, disabled: this.isDisabled}, 
}); 

und wenn Sie die

this.isDisabled = false; 

die Form wird sich nicht ändern Variable ändern. Sie sollten

verwenden

this.cardForm.get ('Nummer'). Disable();

BTW.

Sie sollten patchValue Verfahren zum Ändern Wert verwenden:

this.cardForm.patchValue({ 
    'number': '1703' 
});