我有类似的数据:
"data": [
{
"name": "Joe"
},
{
"location": "USA"
},
{
"age": "unknown"
}
]
注意: 此对象可以更改(不是固定长度)。
我以以下形式显示:
名称(作为标签): Joe (作为输入值)
位置(作为标签):美国(作为输入值)
年龄(作为标签):未知(作为输入值)
app.component.html:
<form [formGroup]="angularForm">
<div class="key-value-container" *ngFor="let item of values">
<div class="key-value">
<div class="key-value-lable">
<label class="label">{{item.key}}</label>
</div>
<div class="input-container">
<input class="input-text" matInput value="{{item.value}}">
</div>
</div>
</div>
<button type="button" class="primary-button" mat-flat-button (click)="_updateForm()">Update</button>
</form>
当我点击“ _ updateForm()” 时,我想通过POST方法更新数据
:{
"key1" (name):"value1"(updated_name),
"key2" (location):"value2"(updated_location),
"key3"(age):"value3" (updated_age)
}
以及如何为此表单创建 formControlerName ?
答案 0 :(得分:1)
formControlName可以动态设置:
<input *ngFor="let field of dynamicData" [formControlName]="field.name">
如果您将数据更改为具有一致键的东西,则逻辑会容易得多。
[
{"label": "first", "value": "Mark"},
{"label": "last", "value": "Smith"},
{"label": "age", "value": "35"}
];
您仍然可以完成数据,只需要一些额外的步骤。请参见下面的示例,该示例与您尝试执行的操作类似:
https://stackblitz.com/edit/angular-form-array-dynamic?embed=1&file=src/app/app.ts