Angular 2反应形式中FormArray内的FormGroup [英] FormGroup inside FormArray in Angular 2 Reactive Forms

问题描述

我无法使Angular 2反应性表单正常工作，该表单具有嵌套在 FormArray 中的 FormGroup .有人可以告诉我我的设置有什么问题吗?

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.

以下是我的组成部分

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)
}

传递给select方法的 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"
            }
        ]
    }

视图模板如下所示.

<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>

此设置使我出现控制台错误**无法在order_lines-> 0-> **中找到控件.我想知道我在做错什么.

This setup gives me a console error **Cannot find control at order_lines -> 0 -> **. I'm wondering what I'm doing wrong.

我可以使它与order_lines FormArray 中的简单 FormControl 一起使用.但是，当在 FormArray 中使用 FormGroup 时，由于给定的错误而失败.

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，以补充我的答案:

@Johna, to complementary my answer:

您有两个功能

  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反应形式中FormArray内的FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！