Aqui está o meu problema.
Eu tenho um JSON dinâmico que preciso converter em um formulário. Então, usei formulários reativos e, passando por todas as propriedades do JSON, crio um FormGroup ou FormControl, desta maneira:
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);
}
Depois de fazer isso, uso modelos recursivos para criar o formulário; se não usar modelos recursivos, faço o formulário funcionar. No entanto, com modelos recursivos, estou recebendo erros:
<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 ERRO Erro: Não é possível encontrar o controle com o nome: 'road'
Isso corresponde a este exemplo JSON:
"address": {
"town": "townington",
"county": "Shireshire",
"road": {
"number": "1",
"street": "the street"
}
Eu tenho está sendo exibido, então eu sei que os elementos estão lá. o que estou perdendo?
formGroupName
por formGroup
qualquer lugar pode corrigir o problema. Mas você precisará de uma maneira de capturar a FormGroup
instância correta para cada grupo aninhado.
oneOf
de um conjunto conhecido de possíveis entradas como name
, personal
, address
etc
[formGroupName]="road"
não está ciente de que está aninhado no grupo deaddress
formulários. Ele está procurando um grupo de formulários chamadoroad
diretamente sob a raiz[formGroup]="myForm"
. Se você aninhar um grupo deroad
formulários diretamente abaixomyForm
, verá que o erro não aparece mais.