javascript - Angular FormGroup 无法分配给对象“[object Object]”的只读属性“status”

Question

我将ngrx与Angular 12一起使用。下面是redux实现

export interface AdminProductState {
  productDetailformValidStatus: FormGroup;
  productDetails: ProductDetailsCommand;
}

export const initialState: AdminProductState = {
  productDetailformValidStatus: new FormGroup({}),
  productDetails: {} as ProductDetailsCommand
};

const reducer = createReducer(
  initialState,
  on(Product_Form_Validation, (state, action) => (
    {
      ...state,
      productDetailformValidStatus: action.productDetailformValidStatus,
      productDetails: action.productDetails
    }
  )),
);

export function AdminProductReducer(state: AdminProductState | undefined, action: Action): any {
  return reducer(state, action);
}

productDetailformValidStatus: FormGroup;定义为FormGroup并且已初始化为new FormGroup({}),

从调度的方法我传递新的 FormGroup 如下

ngOnInit(): void {
    this.form = this.createControls();
    this.adminProductState.productDetailformValidStatus = this.form;
    this.productDetailsCommand.categoryId = 'asdasd2323';
    this.productDetailsCommand.title = 'hello titile';
    this.productDetailsCommand.description = 'thisisthedescription';
    this.productDetailsCommand.subCategoryId = 'thisisthetesting';
    this.adminProductState.productDetails = this.productDetailsCommand;
    this.store.dispatch(Product_Form_Validation(this.adminProductState));
  }

 protected createControls() {
    const group = this.fb.group({});
    this.controlsConfig.container.layoutConfig.forEach((layout, index) => {
      layout.componentConfig.forEach(controls => {
        this.bindControl(controls, group, index)
      })
    });
    return group;
  }

现在this.form包含新控件和表单状态无效，在执行此操作时我面临以下问题

ERROR TypeError: Cannot assign to read only property 'status' of object '[object Object]'
core.js:6456 ERROR TypeError: Cannot add property 0, object is not extensible
ERROR TypeError: Cannot assign to read only property '_rawValidators' of object '[object Object]'

这些错误都来自 core.js。我做错了什么我无法找到它。

来自 redux 工具

标签： javascriptangularngrxangular-formsngrx-store

Answer 1

我必须这样做才能解决问题

ngOnInit(): void {
    this.createControlAsyncTask()
      .then(() => this.store.dispatch(Product_Form_Validation(this.adminProductState)));
  }

  createControlAsyncTask() {
    return new Promise((resolve, reject) => {
      this.form = this.createControls();
      this.adminProductState.productDetailformValidStatus = this.form;
      resolve('done');
    });
  }