Question

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

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

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

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

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

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

我有一个保护子句，如果控件在正常情况下可以正常工作，则只能在valueChanges内继续操作，但是，这为我造成了这种情况，因为这次控件很脏，并且将较旧的值写入并推入ngrx好吧。

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

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

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

this.formArray.patchValue（formArrayValue）;

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

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

代码段

这是我在表单组内创建控件并将其添加到Array的方式。

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

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

谢谢

Answer 1

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

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

因此，请确保您检查是否有不必要的[(ngMode)]="value"。

patchValue在FormArray上不起作用

1 个答案: