Question

请协助，我在下面嵌套了表格数组：

  this.form = this.formBuilder.group({
        projectTitle: ['', [Validators.required, Validators.maxLength(300)]],
        projectDescription: ['', [Validators.required, Validators.maxLength(300)]],
        funding: this.formBuilder.array([this._buildFundingItems()]),
    });

this._buildFundingItems()如下

        private _buildFundingItems(): FormGroup {
          return this.formBuilder.group({
          items: ['', [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]],,
          amount: ['', [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]],
        });
     }


    // after reloading the page, i get data from api and I tried setting the value as follows 
    this.form.setControl('funding', this.formBuilder.array(data.funding || []));

执行上述操作或this.form.setControl('funding', this.formBuilder.array(data.funding || []));时出现错误：Cannot find control with path: 'funding -> 0 -> amount'和Cannot find control with path: 'funding -> 0 -> items'。

在执行以下操作之前，我没有收到任何错误，但是在更新表单或（在valuechanges上）时，formarray没有更新。

     let length: number = data[0].funding.length;
     while (length-- > 0) {
         fundingSupport.push(this._buildFundingItems()); 
     }

     this.form.controls['funding'] = this.formBuilder.array([]);                   
     this.form.controls['funding'].patchValue(data.funding)

我看到了以下链接Angular 4 patchValue based on index in FormArray，这就是我尝试第一种方法的原因。

Answer 1

如果我们不知道您拥有的数据或想要获取的数据，这将是一个困难的帮助。我支持您的数据就像

{
  projecTitle:"title",
  projectDescription:"description"
  items:[{
     items:"item 1",
     amount:10
  },
  {
     items:"item 2",
     amount:5
  }]

}

为什么不使用函数来创建包含数据的表单？

    createForm(data:any)
    {
    this.form = this.formBuilder.group({
            projectTitle: [data?data.projecTitle:'', [Validators.required, Validators.maxLength(300)]],
            projectDescription: [data?data.projectDescription:'', [Validators.required, Validators.maxLength(300)]],
            funding: //See that I change your formBuilder to return
                     //an array, this is because when create the array don't enclosed
                     // by [ ]

                    this.formBuilder.array(this._buildFundingItems(data?data.items:null)),
        });
    }

    //see that I was to return an array of FormGroup
    _buildFundingItems(items:any[]|null):FormGroup[]
    {
    return items?items.map(x=>{
            return this.formBuilder.group({
              items: [x.items, [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]]
              amount: [x.amount, [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]]
            }):
 this.formBuilder.group({
          items: ['', [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]],,
          amount: ['', [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]],
        });

    }

您可以看到调用了函数createForm发送数据：this.createForm（data），使用日期创建表单。如果调用发送null的函数：this.createForm（null）创建一个empy表单

Answer 2

尝试这样的事情：

this.form = this.formBuilder.group({
  projectTitle: ['', [Validators.required, Validators.maxLength(300)]],
  projectDescription: ['', [Validators.required, Validators.maxLength(300)]],
  funding: this.formBuilder.array([this._buildFundingItems({ items: null, amount: null })]),
});

 _buildFundingItems(data): FormGroup {
  if (!data) {
      data = {
        items: null,
        amount: null
      }
  } 
  return this.formBuilder.group({
        items: [data.items, [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]],
      amount: [data.amount, [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]],
     })

}

Answer 3

我遇到了同样的问题。通过为每行创建HomeInteractor组来尝试这种操作：

formBuilder

有关更多帮助，您可以参考以下链接： https://www.concretepage.com/angular-2/angular-2-4-formbuilder-example

在角度形式数组中使用setControl或patchValue时出错

3 个答案: