时间戳

首页 > 解决方案 > patchValue 不适用于 FormArray

angular - patchValue 不适用于 FormArray

问题描述

每当控件的任何值发生更改时，我都会将 FormArray 值存储在 ngrx Store 中。

表单数组有 47 个表单组，每个表单组有一个表单控件。

我有一个父 FormGroup，它有 10 个表单数组，用于 10 个不同的数据集。并且这 10 个表单数组可以通过单个表单控件具有不同数量的 FormGroup。

我注意到的是，当我更改控件的值时。我可以看到它在 valueChange 事件处理程序中发生变化，这就是我在 ngrx 中推送更新值的地方。

如果我去不同的数据集；我可以在控制台中看到主表单具有我更改的控件的更新值。

但是，如果我回到相同的数据集；valueChanges 会自动触发，它正在尝试为我更改的控件设置旧值。

如果控件脏了，我有一个保护子句仅在 valueChanges 内继续，这在正常情况下有效，但是，它为我创造了一种情况，因为这次控件脏了，并且旧值也被写入并推送到 ngrx。

我需要弄清楚为什么 valueChanges 会被触发，以及为什么在重新访问我进行更改的数据集之前看到父表单确实具有正确的值时它会被旧值触发。

在重新渲染时，如果我正在检查表单数组值是否存在于 ngrx 存储中。如果是，那么我使用之前在值更改时存储的 FormArray 值对我拥有的 FormArray 进行修补。

我可以看到来自ngrx store的表单数组值具有更新值但是当我调用时

this.formArray.patchValue(formArrayValue);

我看到 valueChanges 被调用但使用旧值并且在 patchValue 之后 - this.formArray 仍然具有旧值。

我在这里做错了什么还是错过了什么。

代码片段

这就是我在表单组中创建控件并将它们添加到表单数组的方式。

const fg: any = {};     
const rules = this.validationRules.filter(vc => vc.AttributeName.toLowerCase() === prop.key.toLowerCase());

     fg[key] = this.createControl(rules);
         if (value) {
                fg[key].setValue(value,
                 {
                    onlySelf: true,
                    emitEvent: false,
                    emitModelToViewChange: false,
                    emitViewToModelChange: false
                   });
            }

           const formGroup = new FormGroup(fg);
           this.controlsArray.push(formGroup);

这就是我试图在 ngOnChanges 中修补值我的表单数组的方式

this.store.pipe(select(fromForms.getFormsState))
.pipe(take(1))
.subscribe(f => {
    const formArray = f.forms.forms[tableName];
    if (formArray) {
        this.controlsArray.patchValue(formArray);
    }
});

如果有帮助，我会尝试添加一些代码片段。

谢谢

标签： angularformsngrx

解决方案

<mat-form-field>
   <input type="text" matInput placeholder="{{ label }}" [formControlName]="key" [readonly]="!isEditable" [(ngMode)]="value">
</mat-form-field>

我有 [(ngMode)]="value"输入控件，我正在构建一个响应式表单。尽管我的 FormGroup 确实发生了变化，但是当表单被渲染时，它一直在查看未更新的模型，因此它也迫使 FormGroup 具有较旧的值。

因此，请确保检查不必要的[(ngMode)]="value".

推荐阅读