Ich habe also ein komplexes Formular zum Erstellen einer Entität und möchte es auch zum Bearbeiten verwenden. Ich verwende die neue API für eckige Formulare. Ich habe das Formular genau so strukturiert, wie die Daten, die ich aus der Datenbank abrufe. Daher möchte ich den Wert des gesamten Formulars auf die hier abgerufenen Daten festlegen. Dies ist ein Beispiel für das, was ich tun möchte:
this.form = builder.group({
b : [ "", Validators.required ],
c : [ "", Validators.required ],
d : [ "" ],
e : [ [] ],
f : [ "" ]
});
this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data});
PS: NgModel funktioniert nicht mit neuen Formular-APIs. Außerdem macht es mir nichts aus, die Einweg-Datenbindung in der Vorlage wie in zu verwenden
<input formControlName="d" value="[data.d]" />
das funktioniert, aber es wäre ein Schmerz im Fall der Arrays
angular
angular2-forms
Amgad Serry
quelle
quelle
Antworten:
Um alle FormGroup-Werte festzulegen, verwenden Sie setValue :
Verwenden Sie patchValue, um nur einige Werte festzulegen :
Bei dieser zweiten Technik müssen nicht alle Werte angegeben werden, und Felder, deren Werte nicht festgelegt wurden, werden nicht beeinflusst.
quelle
Für den festgelegten Wert, wenn Ihr Steuerelement FormGroup ist, kann dieses Beispiel verwendet werden
quelle
Ja, Sie können setValue verwenden, um den Wert für Bearbeitungs- / Aktualisierungszwecke festzulegen.
Unter http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-using-setvalue-setpatch/ finden Sie Informationen zur Verwendung von Reactive Forms zum Hinzufügen / Bearbeiten von Funktionen mithilfe von setValue. Das hat mir Zeit gespart
quelle
Sie können form.get verwenden, um das spezifische Steuerobjekt abzurufen und setValue zu verwenden
quelle
Wie in den Kommentaren erwähnt, wurde diese Funktion zum Zeitpunkt der Beantwortung dieser Frage nicht unterstützt. Dieses Problem wurde in Winkel 2 rc5 behoben
quelle
Ich habe eine temporäre Lösung implementiert, bis Angular2 das Formular updateValue unterstützt
Verwendung:
Hinweis: Form und Daten müssen die gleiche Struktur haben und ich habe lodash zum Deepcloning von jQuery verwendet und andere Bibliotheken können dies auch
quelle
Das ist nicht wahr. Sie müssen es nur richtig verwenden. Wenn Sie die reaktiven Formen verwenden, sollte das NgModel zusammen mit der reaktiven Direktive verwendet werden. Siehe das Beispiel in der Quelle .
Obwohl es aus den TODO-Kommentaren hervorgeht , wird dies wahrscheinlich entfernt und durch eine reaktive API ersetzt.
quelle
FormControlName
fügt es explizit als hinzu@Input()
. Siehe die Quelle, auf die ich verlinkt habe. Wenn diese negierenden Selektoren nicht vorhanden wären, würde mit dem obigen Beispiel ein NgModel erstellt, das Sie nicht möchten.FormControlDirective
([formControl]
) als auch fürFormControlName
(formControlName
). Wenn dasngModel
ohne eines davon verwendet wird, wird davon ausgegangen, dass Sie deklarative Formulare verwenden, und es wird einNgModel
erstellt. Wenn dasngModel
verwendet wird , neben einem der reaktiven Form Richtlinien, dann , dass reaktive Form Richtlinie wird das Modell handhaben , nicht einNgModel