Hier ist mein Problem.
Ich habe einen dynamischen JSON, den ich in ein Formular konvertieren muss. Also habe ich reaktive Formulare verwendet und durch Durchlaufen aller Eigenschaften von JSON entweder eine FormGroup oder FormControl auf folgende Weise erstellt:
sampleJson ={prop1:"value1", prop2: "value2",...}
...
myForm: FormGroup;
myKeys=[];
...
ngOnInit() {
this.myForm = this.getFormGroupControls(this.sampleJson, this.myKeys);
}
getFormGroupControls(json:any,keys): FormGroup{
let controls = {};
let value = {};
for (let key in json) {
if (json.hasOwnProperty(key)) {
value = json[key];
if (value instanceof Object && value.constructor === Object) {
keys.push({"key":key,children:[]});
controls[key] = this.getFormGroupControls(value,keys[keys.length-1].children);
} else {
keys.push({"key":key,children:[]});
controls[key] = new FormControl(value);
}
}
}
return new FormGroup(controls);
}
Danach verwende ich rekursive Vorlagen, um das Formular zu erstellen. Wenn ich keine rekursiven Vorlagen verwende, funktioniert das Formular. Bei rekursiven Vorlagen werden jedoch Fehler angezeigt:
<form [formGroup]="myForm">
<div class="form-group">
<ng-template #nodeTemplateRef let-node>
<div class="node">
<div *ngIf="node.children.length">
{{"section [formGroupName]="}} {{ getNodeKey(node) }}
<section style="display:block;margin:20px;border:solid 1px blue;padding-bottom: 5px;"
[formGroupName]="getNodeKey(node)" >
<h1>{{ node.key }}</h1>
<ng-template
ngFor
[ngForOf]="node.children"
[ngForTemplate]="nodeTemplateRef">
</ng-template>
</section>
{{"end of section"}}
</div>
<div *ngIf="!node.children.length">
<label [for]="node.key">{{node.key}}</label>
<input type="text" [id]="node.key"
class="form-control">
</div>
</div>
</ng-template>
<ng-template *ngFor="let myKey of myKeys"
[ngTemplateOutlet]="nodeTemplateRef"
[ngTemplateOutletContext]="{ $implicit: myKey }">
</ng-template>
</div>
FormerComponent.html: 25 FEHLER Fehler: Kontrolle mit Name: 'Straße' kann nicht gefunden werden.
Das entspricht diesem Beispiel JSON:
"address": {
"town": "townington",
"county": "Shireshire",
"road": {
"number": "1",
"street": "the street"
}
Ich habe angezeigt, also weiß ich, dass die Elemente da sind. Was vermisse ich?
angular
angular-reactive-forms
Dalorzo
quelle
quelle
[formGroupName]="road"
ist nicht bekannt, dass es unter deraddress
Formulargruppe verschachtelt ist . Es wird nach einer Formulargruppe gesucht, dieroad
direkt unter der Wurzel benannt ist[formGroup]="myForm"
. Wenn Sie eineroad
Formulargruppe direkt darunter verschachtelnmyForm
, wird der Fehler nicht mehr angezeigt.formGroupName
durchformGroup
überall kann das Problem beheben. Sie benötigen jedoch eine Möglichkeit, die richtigeFormGroup
Instanz für jede verschachtelte Gruppe zu ermitteln.oneOf
von einem bekannten Satz von möglichen Einträgen wiename
,personal
,address
usw.Antworten:
Wenn Sie weiterhin eine Hierarchie von Formulargruppen / Steuerelementen wünschen, können Sie die Direktiven formGroup und formControl verwenden, indem Sie sie rekursiv übergeben (anstelle von formGroupName und formControlName).
Stackblits Link
NB: Gleiches Problem hier: Recursive ReactiveForm kann formGroups nicht in der Vorlage finden
quelle
Das Problem mit Ihrem aktuellen Code scheint zu sein, dass ng-template parent Ihre App-Komponente ist, sodass andere formGroupNames in den von Ihnen definierten Top-Vorlagen nicht berücksichtigt werden und immer in root FormGroup gesucht werden.
Es scheint auch, dass der vollständige Gruppenname / Kontrollname in Vorlagen nicht unterstützt wird (z. B. kann nicht verwendet werden
formGroupName="address.road"
).Wenn Sie aus irgendeinem Grund formGroups benötigen, können Sie diese im Kontext an Vorlagen übergeben. Oder Sie können formControls direkt ansprechen:
formGroupName
aus der Vorlagekeys.push({"key":key,children:[], fullKey: parent ? parent.fullKey + '.' + key: key});
(Sie können dieFormControl
Instanz auch selbst speichern.)<input type="text" [formControl]="myForm.get(node.fullKey)"
Stackblitz Beispiel
quelle