So che la risposta è già stata data, ma voglio dare una breve risposta su come aggiornare il valore di un modulo in modo che altri nuovi arrivati possano avere un'idea chiara.
la tua struttura del modulo è così perfetta da usarla come esempio. così, in tutta la mia risposta, lo indicherò come modulo.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
così il nostro modulo è un FormGroup tipo di oggetto che ha tre FormControl .
Esistono due modi per aggiornare il valore del modello:
Utilizzare il metodo setValue () per impostare un nuovo valore per un singolo controllo. Il metodo setValue () aderisce strettamente alla struttura del gruppo di moduli e sostituisce l'intero valore per il controllo.
Utilizzare il metodo patchValue () per sostituire qualsiasi proprietà definita nell'oggetto che è stata modificata nel modello di modulo.
I severi controlli del metodo setValue () aiutano a rilevare gli errori di annidamento in forme complesse, mentre patchValue () fallisce silenziosamente su tali errori.
Dalla documentazione ufficiale angolare qui
pertanto, quando si aggiorna il valore per un'istanza del gruppo di moduli che contiene più controlli, ma è possibile che si desideri aggiornare solo parti del modello. patchValue () è quello che stai cercando.
vediamo esempio. Quando usi patchValue ()
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
ma quando si utilizza setValue () è necessario aggiornare il modello completo poiché aderisce strettamente alla struttura del gruppo di moduli. quindi, se scriviamo
this.form.setValue({
dept: 1
});
// it will throw error.
Dobbiamo passare tutte le proprietà del modello del gruppo di moduli. come questo
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
ma non uso spesso questo stile. Preferisco usare il seguente approccio che aiuta a mantenere il mio codice più pulito e comprensibile.
Quello che faccio è, dichiaro tutti i controlli come una variabile separata e uso setValue () per aggiornare quel controllo specifico.
per il modulo sopra, farò qualcosa del genere.
get companyIdentifier(): FormControl {
return this.form.get('name') as FormControl;
}
get dept(): FormControl {
return this.form.get('dept') as FormControl;
}
get description(): FormControl {
return this.form.get('description') as FormControl;
}
quando è necessario aggiornare il controllo del modulo, basta usare quella proprietà per aggiornarlo. Nell'esempio l'interrogatore ha provato ad aggiornare il controllo del modulo di reparto quando l'utente seleziona un elemento dall'elenco a discesa.
deptSelected(selected: { id: string; text: string }) {
console.log(selected) // Shows proper selection!
// instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.
this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}
Suggerisco di dare un'occhiata all'API FormGroup per conoscere come tutte le proprietà e i metodi di FormGroup.
Ulteriori : per conoscere il getter vedere qui