Question

我正在使用带有表单插件的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上的值。太奇怪了。

UpdateFormValue操作不更新FormControl值

0 个答案: