これが私の問題です。
フォームに変換する必要がある動的JSONがあります。そこで、リアクティブフォームを使用し、JSONのすべてのプロパティを確認することで、FormGroupまたはFormControlを次のように作成しました。
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);
}
その後、再帰テンプレートを使用してフォームを作成します。再帰テンプレートを使用しない場合は、フォームを機能させます。ただし、再帰的なテンプレートを使用すると、エラーが発生します。
<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エラーエラー:名前が「road」のコントロールが見つかりません
これは、次のサンプルJSONに対応しています。
"address": {
"town": "townington",
"county": "Shireshire",
"road": {
"number": "1",
"street": "the street"
}
表示されているので、要素が存在することがわかります。何が欠けていますか?
formGroupName
でformGroup
どこでもして問題を解決することがあります。ただしFormGroup
、ネストされたグループごとに正しいインスタンスを取得する方法が必要です。
oneOf
ように可能なエントリの既知のセットからname
、personal
、address
など
[formGroupName]="road"
それがaddress
フォームグループの下にネストされていることを認識していません。road
ルートの直下にある名前のフォームグループを探してい[formGroup]="myForm"
ます。のroad
直下にフォームグループをネストするとmyForm
、エラーが表示されなくなります。