无法将初始表单值设置为 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.

UPDATE - 低于 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屋！