填充表单数组答案

【问题标题】：Populate Form Array填充表单数组
【发布时间】：2021-09-22 23:09:38
【问题描述】：

晚安各位，我在填充表单数组时遇到以下问题，我设法将代码开发到一个步骤，但现在我陷入了一个步骤。我设法使用 setControl 填充数组，但现在我需要在这个数组中填充一个数组，我遇到了很多麻烦。我能够填充原料数组，但无法填充 feedstockOptions 数组按照下面的代码：

Method populate form

if (response.feedstocks?.length >=1 && response.feedstocks != null) {
  this.feedstockForm.setControl('feedstock', this.editFeedstock(response.feedstocks))              
}
  editFeedstock(response) {
    const formArray = new FormArray ([]);
    response.forEach (s => {
    formArray.push ( this.fb.group ({
      category: s.category,
      position: s.position,
      feedstockOptions: s.feedstockOptions (//this.editFormOptions(s.feedstockOptions))
    }));
  });
  return formArray;
  }
  
    editFormOptions(response) {
    const array = new FormArray([]);
    response.forEach(r => {
      array.push(this.fb.group({
        feedstockOptions: r.feedstockOptions
      }))
    })
    console.log(response)
    return array
    
  }

Form
  feedstockForm: FormGroup = this.fb.group({
    feedstock: this.fb.array([
      this.feedstockFormsCategory()
    ])
  });
  feedstockFormsCategory(): FormGroup {
    return this.fb.group({
      category:  "",
      position: "",
      feedstockOptions: this.fb.array([
        this.feedstockFormsComponent()
      ])
   })
  };
  feedstockFormsComponent(): FormGroup {
    return this.fb.group({
     name: '',
     code: '',
     price:  this.fb.group({
       amount: ['', Validators.required],
       currency: ['BRL'],
     }),
   })
  };

【问题讨论】：

标签： angular typescript forms angular-reactive-forms formarray

【解决方案1】：

Rod，您可以使用“map”代替 forEach 和 push。 “map”数组函数将一个数组转换成另一个数组。

例如

//Is the same
const formArray = new FormArray ([]);
response.forEach (s => {
  formArray.push (
    this.fb.group ({
       category: s.category,
       position: s.position)
    });
return formArray;

//that
return response.map(s=>{
    return this.fb.group ({
       category: s.category,
       position: s.position,)
    });
})

看到我们用数组的值转换了 FormGroup 数组中的对象数组

好吧，当您创建创建表单的函数时，您可以将对象作为“可选”参数传递。所以你的函数 feedstockFormsCategory 和 feedstockFormsComponent 变得像。

   feedstockFormsCategory(data:any=null): FormGroup {
    data=data || {category:'',position:'',feedstockOptions:null}
    return this.fb.group({
      category:data.category,
      position: data.position,
      feedstockOptions: data.feedstockOptions?this.fb.array(
                               data.feedstockOptions.map(x=>this.feedstockFormsComponent(x))):
                      this.fb.array([]) //a empty array
                                        //you can also return an array with one element
                                        //if you use
                                        //this.fb.array([this.feedstockFormsComponent()])
      ])
   })
  };

  feedstockFormsComponent(data:any=null): FormGroup {
    data=data|| {name:'',code:'',price:{amount:'',currency:'BRL'}}
    return this.fb.group({
     name: data.name,
     code: data.code,
     price:  this.fb.group({
       amount: [data.price.amount, Validators.required],
       currency: [data.price.currency],
     }),
   })
  };

看看你可以用响应的值创建一个 FormArray

 this.formArray=this.fb.array(response.map(x=>this.feedstockFormsCategory(x))

【讨论】：