如何以角度在 FormArray 中设置值？

Posted 2023-03-25

【中文标题】如何以角度在 FormArray 中设置值？

【英文标题】：How to set values in a FormArray in angular?

【发布时间】：2022-01-04 22:43:10

【问题描述】：

我正在尝试在内部有一个 FormArray 的 FormGroup 中输入值，但我遇到了这个数组的问题，因为数据没有被映射 我的表格

this.jobOpportunity = this.fb.group(
  title: ['', Validators.required],
  description: ['', Validators.required],
  requirements: this.fb.array([]),
  initDate: ['', [Validators.required, this.dateValidator]],
  endDate: ['', [Validators.required, this.dateValidator]],
  address: ['', Validators.required],
  companyId: ['', Validators.required],
  departmentId: ['', Validators.required],
  isActive: [false],
);

requirements(): FormArray 
  return this.jobOpportunity.get("requirements") as FormArray


newRequirement(): FormGroup 
  return this.fb.group(
     title: ''
 )

我尝试输入我的 Api 返回的值：

this.api.getByIdJobOpportunity(this.jopId.id).subscribe(
    (data: any) => 
      this.jobOpportunity.controls['title'].setValue(data.title);
      this.jobOpportunity.controls['description'].setValue(data.description);
      const dateInitSplit = data.initDate.split('T');

      //I try to map my data to the FormArray here

      this.jobOpportunity.controls['requirements'].patchValue(data.requirements);

      //I tried with setValue but this returns an error and pachValue does not enter 
      //my data

      this.jobOpportunity.controls['initDate'].setValue(dateInitSplit[0]);
      this.jobOpportunity.controls['address'].setValue(data.address);
      this.jobOpportunity.controls['companyId'].setValue(data.companyId);
      this.jobOpportunity.controls['departmentId'].setValue(data.departmentId);
      this.jobOpportunity.controls['isActive'].setValue(data.isActive);
      const dateEndSplit = data.endDate.split('T');
      this.jobOpportunity.controls['endDate'].setValue(dateEndSplit[0]);
      this.url = data.image;
      this.formTitle = 'Actualizar empleo';
      this.labelBtn = 'Actualizar';
    ,
 );

参考图片

当他尝试使用 setValue() 时，他返回了这个错误

【参考方案1】：

错误原因：

您正在尝试在没有表单组的空 FormArray 上修补/设置值。

requirements: this.fb.array([]), 创建了一个控件requirements，它将是一个FormArray，但当前为空。因此，当您从 API 获得响应时，您会尝试在该空表单数组上修补/设置一个值。它需要为来自 API 的每个项目创建一个FormGroup。

解决方案：

假设您的 API 返回 requirements 的对象数组。遍历需求数组并在其中创建一个新的表单组+补丁值。

this.api.getByIdJobOpportunity(this.jopId.id).subscribe(
  (data: any) => 

....

if(Array.isArray(data.requirements))
  data.requirements.forEach(item=>
   let newControl=newRequirement(); //Creates a new formgroup
   newControl.patchValue(item); //Patch value 
   this.requirements().push(newControl); //Add the control to the FormArray
)


...