Angular 2 Reactive Forms中FormArray内的FormGroup [英] FormGroup inside FormArray in Angular 2 Reactive Forms
问题描述
我未能让 Angular 2 反应式表单工作，其中 FormGroup 嵌套在 FormArray 中.有人可以告诉我我的设置有什么问题吗?
为简洁起见，省略了代码中不相关的部分.
以下是我的组件
orderForm: FormGroup = this.fb.group({ID: ['']，商店:[''，Validators.required]，//与错误相关的部分order_lines: this.fb.array([这个.fb.group({ID: ['']，order_id: [],product_id: [],描述:[''，Validators.required]，unit_price: ['', Validators.required],折扣: [0],单位:[1，Validators.required]，line_total: ['', Validators.required]})])});构造函数(私人FB:FormBuilder){}//订单实例是从代码中的其他地方传递过来的选择(订单:订单):无效{this.orderForm.reset(order)}传递给select方法的Order实例是这样的:
<代码> {身份证":20，"store": "一些商店",订单行":[{身份证":6，订单ID":20，"product_id": 1,"description": "TU001: 圆点","unit_price": "1000.00","折扣": "100.00",单位":2，line_total":1900.00"},{身份证":7，"order_id": 20,"product_id": 2,"description": "TU002: 圆点","unit_price": "500.00","折扣": "0.00",单位":1，line_total":500.00"}]}视图模板如下所示.
</表单>
这个设置给了我一个控制台错误**无法在 order_lines -> 0 -> ** 找到控制.我想知道我做错了什么.
我可以使用 order_lines FormArray 中的一个简单的 FormControl 来实现它.但是当在 FormArray 中使用 FormGroup 时，它会失败并出现给定的错误.
你能帮我解决这个问题吗.
@Johna，补充我的回答:
你有两个功能
buildForm(data:any):FormGroup{返回数据?this.fb.group({id: [data.id?data.id:''],存储:[data.store?data.store:'', Validators.required],order_lines:this.fb.array(this.buildArrayControl(data.order_lines?data.order_lines:null))}):这个.fb.group({ID: ['']，商店:[''，Validators.required]，order_lines:this.fb.array(this.buildArrayControl(null))})}buildArrayControl(data:any[]|null):FormGroup[]{返回数据?data.map(x=>{返回 this.fb.group({id: [x.id?x.id:''],order_id: [x.order_id?x.order_id:''],product_id: [x.product_id?x.product_id:''],描述:[x.description?x.description:'', Validators.required],unit_price: [x.unit_price?x.unit_price:'', Validators.required],折扣: [x.discount?x.discount:0],单位:[x.units?x.units:1, Validators.required],line_total: [x.line_total?x.line_total:'', Validators.required]})}):[this.fb.group({ID: ['']，order_id: [],product_id: [],描述:[''，Validators.required]，unit_price: ['', Validators.required],折扣: [0],单位:[1，Validators.required]，line_total: ['', Validators.required]})]}然后你可以做，例如
this.orderForm = this.buildForm({id:'112',商店:'22655'，order_lines:[{描述:1222,....},{描述:1455,...}]})//或者this.orderForm=this.buildForm(null);I failed to get an Angular 2 reactive form to work which has a FormGroup nested in a FormArray. Can somebody show me what is wrong in my setup.
Unrelated parts of the code has been omitted for the brevity.
Following is my component
orderForm: FormGroup = this.fb.group({
id: [''],
store: ['', Validators.required],
//The part related to the error
order_lines: this.fb.array([
this.fb.group({
id: [''],
order_id: [],
product_id: [],
description: ['', Validators.required],
unit_price: ['', Validators.required],
discount: [0],
units: [1, Validators.required],
line_total: ['', Validators.required]
})
])
});
constructor(private fb: FormBuilder) { }
//Order instance is passed from elsewhere in the code
select(order: Order): void {
this.orderForm.reset(order)
}
The Order instance passed to the select method is like this:
{
"id": 20,
"store": "Some Store",
"order_lines": [
{
"id": 6,
"order_id": 20,
"product_id": 1,
"description": "TU001: Polka dots",
"unit_price": "1000.00",
"discount": "100.00",
"units": 2,
"line_total": "1900.00"
},
{
"id": 7,
"order_id": 20,
"product_id": 2,
"description": "TU002: Polka dots",
"unit_price": "500.00",
"discount": "0.00",
"units": 1,
"line_total": "500.00"
}
]
}
The view template is like below.
<form [formGroup]="orderForm">
<input type="number" formControlName="id">
<input type="text" formControlName="store">
<div formArrayName="order_lines">
<div *ngFor="let line of orderForm.get('order_lines'); let i=index">
<div [formGroupName]="i">
<input type="text" [formControlName]="product_id">
<input type="text" [formControlName]="description">
<input type="number" [formControlName]="units">
<input type="number" [formControlName]="unit_price">
<input type="number" [formControlName]="line_total">
</div>
</div>
</div>
</form>
This setup gives me a console error **Cannot find control at order_lines -> 0 -> **. I'm wondering what I'm doing wrong.
I could get this to work with a simple FormControl inside the order_lines FormArray. But it fails with the given error when a FormGroup is used inside the FormArray.
Can you please help me to get this working.
@Johna, to complementary my answer:
You have two functions
buildForm(data:any):FormGroup
{
return data?this.fb.group({
id: [data.id?data.id:''],
store: [data.store?data.store:'', Validators.required],
order_lines:this.fb.array(this.buildArrayControl(data.order_lines?data.order_lines:null))
})
:
this.fb.group({
id: [''],
store: ['', Validators.required],
order_lines:this.fb.array(this.buildArrayControl(null))
})
}
buildArrayControl(data:any[]|null):FormGroup[]
{
return data?
data.map(x=>{
return this.fb.group({
id: [x.id?x.id:''],
order_id: [x.order_id?x.order_id:''],
product_id: [x.product_id?x.product_id:''],
description: [x.description?x.description:'', Validators.required],
unit_price: [x.unit_price?x.unit_price:'', Validators.required],
discount: [x.discount?x.discount:0],
units: [x.units?x.units:1, Validators.required],
line_total: [x.line_total?x.line_total:'', Validators.required]
})
})
:
[this.fb.group({
id: [''],
order_id: [],
product_id: [],
description: ['', Validators.required],
unit_price: ['', Validators.required],
discount: [0],
units: [1, Validators.required],
line_total: ['', Validators.required]
})
]
}
then you can do, e.g.
this.orderForm = this.buildForm(
{
id:'112',
store:'22655',
order_lines:[{description:1222,....},{description:1455,...}]
}
)
//or
this.orderForm=this.buildForm(null);
这篇关于Angular 2 Reactive Forms中FormArray内的FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
