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

上面的代码用于普通的patch，但是如何使用Angular8的反应形式动态patch数组内部的值呢？

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，以及每个迭代中的 FormControl。

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

Angular How to patch value in the form array

angular-material

angular

angular-reactive-forms

angular-forms

angular8