[英]Angular 2 Forms Nested Ojects in Arrays
I am trying to figure out nested objects in arrays in forms for angular. 我试图找出角度形式的数组中的嵌套的对象。 I have read several questions and posts but am still not able to figure it out.
我已经阅读了几个问题和帖子,但仍然无法弄清楚。 Maybe I am just missing something very simple.
也许我只是缺少一些非常简单的东西。
See below simplified code. 参见下面的简化代码。
HTML 的HTML
<form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)">
<hr>
<div formGroupName="type">
<div formArrayName="options">
<div *ngFor="let child of userForm.controls.type.controls.options.controls; let i = index" >
<div formGroupName="{{i}}">
<label>{{i+1}}. Test: </label>
<input formControlName="test" /><br>
<label>{{i+1}}. Label: </label>
<input formControlName="label" /><br>
<label>{{i+1}}. Value: </label>
<input formControlName="value" />
</div>
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
<br>
<pre>{{userForm.value | json }}</pre>
Application 应用
export class App {
name:string;
userForm: FormGroup;
fields: any;
ngOnInit() {
this.fields = {
isRequired: true,
type: {
options: [
{
test {
name: 'test1'
}
label: 'Option 1',
value: '1',
},
{
test {
name: 'test2'
}
label: 'Option 2',
value: '2'
}
]
}
};
this.userForm = this.fb.group({
type: this.fb.group({
options: this.fb.array([])
})
});
this.patch()
}
submit(value) {
console.log(value);
}
constructor(private fb: FormBuilder) { }
patch() {
const control = <FormArray>this.userForm.controls.type.controls['options'];
this.fields.type.options.forEach(x => {
control.push(this.patchValues(x.label, x.value))
})
}
patchValues(label, value) {
return this.fb.group({
test: {name: "HELP"},
label: [label],
value: [value]
})
}
}
My output looks like this... 我的输出看起来像这样...
1. Test: [object Object]
1. Label: Option 1
1. Value: 1
2. Test: [object Object]
2. Label: Option 2
2. Value: 2
[Submit]
and the data object is 数据对象是
{
"type": {
"options": [
{
"test": {
"name": "HELP"
},
"label": "Option 1",
"value": "1"
},
{
"test": {
"name": "HELP"
},
"label": "Option 2",
"value": "2"
}
]
}
}
I am looking to change the html template to display test.name instead of the test object. 我想更改html模板以显示test.name而不是测试对象。 Am I initializing the form correctly or am I calling the field incorrectly from the html code?
我是正确初始化表格还是从html代码中错误地调用字段? When I change formControlName="test" to formControlName="test.name" it errors out stating that test.name does not exist.
当我将formControlName =“ test”更改为formControlName =“ test.name”时,它会错误地指出test.name不存在。
Desired output... 所需的输出...
1. Test: HELP
1. Label: Option 1
1. Value: 1
2. Test: HELP
2. Label: Option 2
2. Value: 2
In your code you need to change the following: 在您的代码中,您需要更改以下内容:
patchValues(label, value) {
return this.fb.group({
**test: {name: "HELP"},**
label: [label],
value: [value]
})
}
All the names on the left hand side are the formControlNames. 左侧的所有名称均为formControlNames。 That's why you get an error when you try to use test.name because it does't exist as a formControlName.
这就是为什么当您尝试使用test.name时会出现错误的原因,因为它不以formControlName的形式存在。
I think what you are trying to achieve is something similar to Dynamic forms. 我认为您要实现的目标类似于动态表格。 Please refer to the following link as it would help in the implementation: https://angular.io/guide/dynamic-form
请参考以下链接,因为它会对实施有所帮助: https : //angular.io/guide/dynamic-form
If you need to maintain the build of your original data, you need to nest your test
as a nested formgroup inside your formgroup, so it could look like this: 如果需要维护原始数据的构建,则需要将
test
作为嵌套的表单组嵌套在表单组中,因此它看起来像这样:
this.fields.type.options.forEach(x => {
control.push(this.patchValues(x))
})
patchValues(x) {
return this.fb.group({
// nested group!
test: this.fb.group({
name: [x.test.name]
}),
label: [x.label],
value: [x.value]
})
}
and template would look like this: 和模板如下所示:
<div formGroupName="{{i}}">
<div formGroupName="test">
<label>{{i+1}}. Test: </label>
<input formControlName="name" /><br>
</div>
<label>{{i+1}}. Label: </label>
<input formControlName="label" /><br>
<label>{{i+1}}. Value: </label>
<input formControlName="value" />
</div>
If it does not need to be maintained, you can of course just extract the name
from the test instead like so: 如果不需要维护,当然可以从测试中提取
name
,如下所示:
control.push(this.patchValues(x.label, x.value, x.test.name))
patchValues(label, value, name) {
return this.fb.group({
test: [name],
label: [label],
value: [value]
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.