patchValue 不适用于 FormArray答案

【问题标题】：patchValue not working on FormArraypatchValue 不适用于 FormArray
【发布时间】：2018-12-20 02:15:16
【问题描述】：

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

Form Array 有 47 个 Form Group，每个 Form Group 有一个 Form Control。

我有一个父 FormGroup，它有 10 个表单数组，用于 10 个不同的数据集。而这 10 个表单数组可以有不同数量的 FormGroup 和一个表单控件。

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

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

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

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

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

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

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

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

如果有帮助，我会尝试添加一些代码 sn-ps。

谢谢

【问题讨论】：

FormArray 嵌套 FormGroups 和嵌套 FormControls 的任何原因？粘贴您的代码，以便我们提供更好的帮助
当您说“this.formArray 仍有旧值”时，您是否在 UI 或控制台中看到了这些值？
@SergioAlen - 我在 UI 和控制台中都看到了旧值。我有近 10 个不同的数据集，我使用单个组件动态显示它们。取决于点击哪个数据集；我从ngrx 中获取数据并对组件进行水合。
@SergioAlen - 我已经更新了我的问题，提供了更多细节和我在此期间所做的一些发现。
很难看出问题出在哪里。您是否在组件中实现ControlValueAccessor？您是否尝试在触发值更改订阅后使用ChangeDetectorRef 方法markForCheck() 或detectChanges()？

标签： angular forms ngrx

【解决方案1】：

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

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

所以请确保检查不必要的[(ngMode)]="value"。

【讨论】：