如何保持角度反应形式答案

【问题标题】：how to keep angular reactive form如何保持角度反应形式
【发布时间】：2020-05-06 05:56:47
【问题描述】：

我使用角度反应形式。我想在使用 ngxs 表单插件离开组件后保留表单数据。

我的表格：

travelerForm: FormGroup;

this.travelerForm = this.formBuilder.group({
      toppings: ['', Validators.required],
      accept: [true, Validators.requiredTrue],
    });

我的州代码：

import { Action, State, Store, Selector } from '@ngxs/store';
import { SubmitTravelerForm } from '../actions/travelers.action';


@State<any>({
  name: 'traveler',
  defaults: {
    travelerForm: {
      model: undefined,
      dirty: true,
      status: '',
      errors: {}
    }
  }
})
export class TravelerState {
  @Action(SubmitTravelerForm)
  submitForm({getState}){
    console.warn(getState().travelerForm);


  }
constructor(private store: Store) {}
  @Selector() static travelerForm(state: any) {
    return state.travelerForm;
}

}

我的操作代码：

export class SubmitTravelerForm {
    static readonly type = '[Traveler] Submit Form';
  }

我的html代码：

<form [formGroup]="travelerForm" novalidate ngxsForm="traveler.travelerForm" ngxsFormClearOnDestroy="false" (ngSubmit)="onSaveAndContinue()">
    <input type="text" formControlName="toppings">
    <br>
    <input type="checkbox" formControlName="accept" id="accept"><label for="accept">I accept your terms</label>
    <button type="submit" >Submit</button>
  </form>

还有我的 onSaveAndContinue() 方法：

this.store.dispatch(new SubmitTravelerForm());


    this.router.navigate(['../payment/confirm'], {
      queryParams: {
        source: this.source,

      }
    });

如何获取提交表单值并绑定到我的表单以在离开组件后保留表单数据值并返回

【问题讨论】：

代码中的错误是您将 ngxsFormClearOnDestroy 布尔属性设置为字符串“false”。任何带有字符的字符串都将被视为真实的。表达这一点的正确方法是[ngxsFormClearOnDestroy]="false"。这样，angular 会将“false”表达式评估为布尔值false。这是在 NGXS 3.7 中修复的，它可以解释非布尔值（@bangash 提交了一个 PR 来为你修复它！）。

标签： angular ngxs

【解决方案1】：

删除 ngxsFormClearOnDestroy="false"，以便在您返回 stackblitz 后数据将在那里。

【讨论】：

ngxsFormClearOnDestroy="false" 和 ngxsFormClearOnDestroy="true" 对待是一样的，我认为它面对的是假字符串，所以它总是会是真的

【解决方案2】：

鉴于http://ngxs.io 说：除了这些问题之外，还有一些工作流程，您想填写表格并离开，然后返回并恢复当前状态但如何？有人有解决方案吗？

【讨论】：

好问题，但很抱歉，这根本不是答案。