Angular，NgRx：FormControl patchValue() 失败 "Cannot assign to read only property '_pendingValue'"

Question

我有 ParentComponent 和 ChildComponent。这两个组件一起构成了具有一些高级功能的搜索表单。我正在使用 NgRx 来管理应用程序状态。

当我在 ChildComponent 的 ngOnDestroy() 中触发状态更新时，为了在 childDropdown 值被销毁之前保存它，然后在 ParentComponent 状态订阅中我得到以下错误:

TypeError: Cannot assign to read only property '_pendingValue'

简化模板：

<app-parent>
    <form [formGroup]="searchForm">

        <mat-form-field>
            <mat-select
                [formControlName]="parentDropdown.controlName"
                [(value)]="parentDropdown.value"
                (selectionChange)="onSelectionChange(parentDropdown.value)"
            >
                <mat-option *ngFor="let item of parentDropdown.data" [value]="item">{{ item.name }}</mat-option>
            </mat-select>
        </mat-form-field>

        <app-child>
            <mat-form-field>
                <mat-select
                    [formControlName]="childDropdown.controlName"
                    [(value)]="childDropdown.value"
                    (selectionChange)="onSelectionChange(childDropdown.value)"
                >
                    <mat-option *ngFor="let item of childDropdown.data" [value]="item">{{ item.name }}</mat-option>
                </mat-select>
            </mat-form-field>
        </app-child>
    </form>
</app-parent>

在 ChildComponent 的 ngOnDestroy 中调度操作以将 childDropdown 的 value 保存到状态：

ngOnDestroy(): void {
    this.store.dispatch(fromSearchActions.UPDATE_CHILD_DROPDOWN({ value: childDropdown.value }));
}

在 ParentComponent 的 ngOnInit 中，parentDropdown 的 value 从状态刷新：

ngOnInit(): void {
    this.store
        .select(getSearchState)
        .subscribe((state: SearchState) => {
            
            this.parentDropdown.value = state.parentDropdown.value;
            this.searchForm
                .get(this.parentDropdown.controlName)
                .patchValue(state.parentDropdown.value); // HERE it fails
        });
}

仅在 ChildComponent 的 ngOnDestroy 中调度操作后才开始发生错误。

由于某种原因 parentDropdown FormControl 的 _pendingValue 变为只读。

知道发生了什么吗？

Answer 1

找到上述错误的原因。我不小心将 FormControl 保存到 NgRx 存储中，这使得 FormControl 的所有属性都只读。

修复是，不将 FormControl 保存到存储中，而只保存一个值，然后可以很容易地 restored/reassigned。

Angular，NgRx：FormControl patchValue() 失败 "Cannot assign to read only property '_pendingValue'"

Angular, NgRx: FormControl patchValue() fails with "Cannot assign to read only property '_pendingValue'"

javascript

angular-material

ngrx

angular

angular-reactive-forms