Angular如何修补表单数组中的值

Question

我正在使用 Angular8 和响应式表单。我的 ngOnInit 是：

ngOnInit(): void {
  this.makeForm = this.fb.group(
    year: ['', Validators.required],
    amount: ['', Validators.required],
    desc: ['', Validators.required],
    details: new FormArray([
      this.det(),
    ]
  );
}

det() {
  return new FormGroup({
    for: new FormControl(''),
    remarks: new FormControl('')
  });
}

我有来自后端的数据来修补数组：

 {
  "amount": 9000,
  "year": 1996,
  "id": 1,
  "desc": "P1",
  "details": [
    {
      "id": 1,
      "remarks": "ok",
      "for": "1"
    },
    {
      "id": 24,
      "remarks": "OK",
      "for": "1"
    },
    {
      "id": 25,
      "remarks": "OK",
      "for": "1"
    }
  ]
 }

我通常用这种方法修补值：

getppredit() {
  let data:any = this.shareService.ParentShare.value;
  let id = data.id;
  this.dataService.getdataEdit(id)
    .subscribe((result: any) => {
      let no = result.no;
      let year = result.year;
      this.makeForm.patchValue({
        no: no,
        year: year
      });
  });
}

以上代码用于普通补丁，但是如何使用Angular8的反应形式动态地对数组内部的值进行补丁呢？

Answer 1

在这里试试这个

getppredit(){
  let data:any = this.shareService.ParentShare.value
  let id = data.id 
  this.dataService.getdataEdit(id)
    .subscribe((result: any)  => {
      let no = result.no;
      let year= result.year
      this.makeForm.patchValue({
          no     : no,
          year: year
          })

      //initialize empty array
      this.getFormArray() = new FormArray([]);

      //create needed formGroups and inside each formGroup all formControls
      for (let detail of result.details) {
        
        let idControl: FormControl = new FormControl('');
        let requestForControl: FormControl = new FormControl('');
        let remarkControl: FormControl = new FormControl('');

        idControl.setValue(detail.id);
        ForControl.setValue(detail.requestFor);
        remarkControl.setValue(detail.remark);

        this.getFormArray().push(new FormGroup({
          id: idControl,
          For: requestForControl,
          remark: remarkControl}));
       }

    })//end of subscribe
 
 }

    getFormArray(): FormArray{
        return this.makeForm.get('details') as FormArray;
      }

表单数组通常旨在包含动态数据。因此，您必须首先在表单数组中创建动态表单控件（在收到响应后），然后将值放入其中。

Answer 2

下面是我使用FormArray 的方法，它跟踪 FormControl、FormGroup 或 FormArray 实例数组的值和有效性状态：

export class Component implements OnInit {

  // initialize the FormArray with an empty array!
  formArray: FormArray = new FormArray([]);
  makeForm: FormGroup;

  ngOnInit() {
    this.makeForm = this.fb.group({
      no: ['', Validators.required],
      year: ['', Validators.required],
    });
  }

  getParEdit() {
    ...
    this.dataService.getDataEdit(id).subscribe(result => {
      const { no, year, details } = result;
      this.makeForm.patchValue({ no, year });

      if (details.length) {
        details.forEach(detail => {
          this.formArray.push(
            this.fb.group({
              id: new FormControl({ value: detail.id }),
              requestFor: new FormControl({ value: detail.requestFor }),
              remark: new FormControl({ value: detail.remark }),
            });
          );
        });
      }
    });
  }
}

您可以为每个detail 迭代动态创建FormGroup，以及每个迭代中的FormControls。