Ich weiß, dass die Antwort bereits gegeben ist, aber ich möchte eine kurze Antwort geben, wie der Wert eines Formulars aktualisiert wird, damit andere Neuankömmlinge eine klare Vorstellung davon bekommen.
Ihre Formularstruktur ist so perfekt, dass Sie sie als Beispiel verwenden können. In meiner Antwort werde ich es als Form bezeichnen.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
Unser Formular ist also ein Objekt vom Typ FormGroup mit drei FormControl .
Es gibt zwei Möglichkeiten, den Modellwert zu aktualisieren:
Verwenden Sie die Methode setValue (), um einen neuen Wert für ein einzelnes Steuerelement festzulegen. Die setValue () -Methode hält sich strikt an die Struktur der Formulargruppe und ersetzt den gesamten Wert für das Steuerelement.
Verwenden Sie die patchValue () -Methode, um alle im Objekt definierten Eigenschaften zu ersetzen, die sich im Formularmodell geändert haben.
Die strengen Überprüfungen der setValue () -Methode helfen dabei, Verschachtelungsfehler in komplexen Formen abzufangen, während patchValue () diese Fehler stillschweigend ausfällt.
Aus der offiziellen Angular-Dokumentation hier
Wenn Sie also den Wert für eine Formulargruppeninstanz aktualisieren, die mehrere Steuerelemente enthält, möchten Sie möglicherweise nur Teile des Modells aktualisieren. patchValue () ist das, wonach Sie suchen.
Mal sehen, Beispiel. Wenn Sie patchValue () verwenden
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
Wenn Sie jedoch setValue () verwenden , müssen Sie das vollständige Modell aktualisieren, da es die Struktur der Formulargruppe strikt einhält . Also, wenn wir schreiben
this.form.setValue({
dept: 1
});
// it will throw error.
Wir müssen alle Eigenschaften des Formulargruppenmodells übergeben. so was
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
aber ich benutze diesen Stil nicht häufig. Ich bevorzuge den folgenden Ansatz, um meinen Code sauberer und verständlicher zu halten.
Ich deklariere alle Steuerelemente als separate Variable und aktualisiere dieses spezifische Steuerelement mit setValue ().
Für das obige Formular werde ich so etwas tun.
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;
}
Wenn Sie das Formularsteuerelement aktualisieren müssen, verwenden Sie einfach diese Eigenschaft, um es zu aktualisieren. In diesem Beispiel hat der Fragesteller versucht, die Abteilungsformularsteuerung zu aktualisieren, wenn der Benutzer ein Element aus der Dropdown-Liste auswählt.
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.
}
Ich schlage vor, einen Blick auf die FormGroup-API zu werfen zu , um mehr über alle Eigenschaften und Methoden von FormGroup zu erfahren.
Zusätzlich : Informationen zu Getter finden Sie hier