无法将初始表单值设置为FormArray [英] Cannot set initial form values into FormArray

问题描述

我有一个反应性表单，在 cancel 上必须将初始表单值再次设置为formGroup.

I have a reactive form that on cancel has to set again the initial form values into the formGroup.

import { Map } from "immutable";

@Input() data: any;

public ngOnInit() {
    if (this.data && this.data.controls) {
        this.group = this.fb.group({
            isActive: [this.data.isActive],
            items: this.fb.array(this.buildFormArray(this.data.controlPerformers)),
            });

        // Deep copy of the formGroup with ImmutableJs
        this.originalFormData = Map(this.group).toJS();
    }
}

 public buildFormArray(controllers: IControlPerformer[]) {
    return controllers.map((ctlr) => {
        return this.fb.group({
            user: [ctrl.userData],
            ctrlName: [ctlr.name, Validators.required],
            date: [moment(ctlr.date).toDate(), Validators.required],
        });
    });
}

public cancel() {
  const existingItems = this.group.get("items") as FormArray;
  while (existingItems.length) {
            existingItems.removeAt(0);
        }

        // Here the error when trying to set the FormArray value
        this.group.setValue(this.originalFormData.value);  
   }

错误消息:

此表单尚未注册任何表单控件.如果您使用的是ngModel，则可能要检查下一个刻度(例如，使用setTimeout).

There are no form controls registered with this array yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout).

此问题有相同的问题，但我无法解决就我而言，解决它.

This question had the same issue, but I could not fix it in my case.

更新-下方 formGroup 的值.看起来不错，并已正确初始化.

UPDATE - Below The value of formGroup. It looks good and properly initialized.

{
 "isActive": true,
 "items": [
  {
   "user": "Walter",
   "ctrlName": "Orders",
   "date": "2018-03-18T23:00:00.000Z"
  }
}

推荐答案

如果从表单数组中删除项目，则需要重新添加它们，因为 setValue 或 patchValue 函数，则不会创建表单控件，而只会设置/修改现有的表单控件值.因此，只需将新控件添加到空的 FormArray :

If you remove items from the form array, then you need to add them anew, since setValue or patchValue functions do not create form control if it is missing, but rather only set/modify existing form control value. So, just add new controls to empty FormArray:

public cancel() {
  const existingItems = this.group.get("items") as FormArray;
  while (existingItems.length) {
    existingItems.removeAt(0);
  }

  // Even adding a new FormGroup to the array, the exception remains.
  // existingItems.push(this.fb.group({})););

  // Here the error when trying to set the FormArray value
  this.group.patchValue(this.originalFormData.value);
  this.originalFormData.value.items.forEach(item => {
    existingItems.push(this.fb.group(item)); 
  });
}

STACKBLITZ: https://stackblitz.com/edit/angular-rsglab?file=app%2Fhello.component.ts

STACKBLITZ: https://stackblitz.com/edit/angular-rsglab?file=app%2Fhello.component.ts

这篇关于无法将初始表单值设置为FormArray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！