2

我正在使用带有表单插件的 ngxs 作为我的 Nativescript 应用程序的状态管理。

我想要的是手动更新表单控件值。我创建了以下表格：

 this.form = this.fb.group({
   type: [''],
 })

我像这样在我的html上渲染它：

<StackLayout [formGroup]="form" ngxsForm="transactionHistory.filterForm" class="form">
  <FlexboxLayout>
    <DatePickerField hint="&#xf133; Select from " width="50%" class="fas date-select"></DatePickerField>
    <DatePickerField hint="&#xf133; Select to" width="50%" class="fas date-select"></DatePickerField>
  </FlexboxLayout>
  <FlexboxLayout>
    <Button (tap)="onChooseType()" [text]="selectedType + ' &#xf078;'" class="dropdown-btn fas"></Button>
    <Button text="All status &#xf078;" class="dropdown-btn fas"></Button>
  </FlexboxLayout>
  <FlexboxLayout>
    <Button text="All Payment Options &#xf078;" class="dropdown-btn fas po" width="100%"></Button>
  </FlexboxLayout>
  <FlexboxLayout justifyContent="flex-end">
    <Button text="Reset Filters" class="btn-reset"></Button>
    <Button (tap)="submit()" text="Apply" class="btn-apply"></Button>
  </FlexboxLayout>
</StackLayout>

这是我的状态类：

export class TransactionHistoryStateModel {
  transactions: PaginatedList<Transaction>;
  loading: boolean;
  filterForm: any;
  availableTypes: any;
}

@State({
  name: 'transactionHistory',
  defaults: {
    transactions: null,
    loading: false,
    filterForm: {
      model: undefined,
      dirty: false,
      status: '',
      errors: {},
      selectedType: 'All Types',
    },
    availableTypes: TRANSACTION_HISTORY_TYPE_MAPPING
  }
})
export class TransactionHistoryState {
  constructor(private client: HttpClient, private store: Store) {

  }

  @Action(HandleChosenType)
  handleChosenType({ setState, getState, dispatch }: StateContext<TransactionHistoryStateModel>, { selectedItem }: HandleChosenType) {
    const state = getState();
    const filterForm = state.filterForm;
    filterForm.selectedType = selectedItem.text;

    setState({
      ...state,
      filterForm
    });

    return dispatch(new UpdateFormValue({ 
      value: 'WAH' , 
      path: 'transactionHistory.filterForm.type'
    }));
  }
}

如您所见，我通过调度 UpdateFormValue 操作手动更新表单控件值。但是，当我试图获取控件的值时，它是空的。为什么呢？

谢谢！

编辑：我实际上能够使用以下方法更新状态：

  this.store.dispatch([
    new UpdateFormValue({ 
      value: [ {type: 'HAHA' }], 
      path: 'transactionHistory.filterForm'
    }),
  ]);

但是，状态的变化不会更新我的 FormGroup 上的值。太奇怪了。

4

0 回答 0