当状态由ngrx-forms管理时，如何以角度动态地将formgroup控件添加到formarray？答案

【问题标题】：How to dynamically add formgroup controls to formarray in angular while the state is managed by ngrx-forms?当状态由ngrx-forms管理时，如何以角度动态地将formgroup控件添加到formarray？
【发布时间】：2020-08-02 07:11:38
【问题描述】：

我正在使用一个 ngrx-forms 库来管理我的表单状态。

这是图书馆：https://ngrx-forms.readthedocs.io/

对我来说，它适用于简单的输入。但是说到动态控件，我就不知道怎么用了。

例如，假设我们有一个表单：

myform = this.fb.group({
  topic: '',
  books: [''],
  languages: [''],
})

现在语言控件看起来像这样：

{语言：''，代码：''}

当用户单击添加语言按钮时，如何将上述控件动态添加到表单构建器的语言数组中？我可以使用常规的 FormBuilder 来完成。没问题。

但是当谈到使用 ngrx 和 ngrx-forms 管理状态时，我如何创建一个 reducer 函数来动态添加语言控件？

【问题讨论】：

您能否将问题标记为ngrx-forms，以便于查找？

标签： angular ngrx

【解决方案1】：

ngrx-forms 的作者在这里。

使用下面的组件来构建你上面描述的表单，@angular/forms。

export class ExampleComponent {
  private formBuilder = new FormBuilder();
  private form = this.formBuilder.group({});

  buildForm() {
    this.form = this.formBuilder.group({
      topic: '',
      languages: this.formBuilder.array([]),
    });

    this.addLanguageControlGroup();
  }

  addLanguageControlGroup(lang?: string, code?: string) {
    const newControl = this.formBuilder.group({
      language: lang || '',
      code: code || '',
    });

    (this.form.get('languages') as FormArray).push(newControl);
  }
}

使用 ngrx-forms，代码将是这样的 reducer（使用 ngrx v8+）：

interface MyFormValue {
  topic: string;
  languages: LanguageFormValue[];
}

interface LanguageFormValue {
  language: string;
  code: string;
}

const INITIAL_FORM_VALUE: MyFormValue = {
  topic: '',
  languages: [
    {
      language: '',
      code: '',
    },
  ],
};

const myFormReducer = createReducer(
  {
    formState: createFormGroupState('MY_FORM', INITIAL_FORM_VALUE),
  },
  onNgrxForms(),
);

在你的组件中，你可以有这样的东西：

export class NgrxFormsExampleComponent {
  @Input() formState: FormGroupState<MyFormValue>;

  constructor(private actionsSubject: ActionsSubject) { }

  addLanguageControlGroup(lang?: string, code?: string) {
    this.actionsSubject.next(
      new AddArrayControlAction<LanguageFormValue>(
        this.formState.controls.languages.id,
        {
          language: lang || '',
          code: code || '',
        },
      )
    );
  }
}

除了使用 ngrx-forms 中的内置 AddArrayControlAction 之外，您还可以创建自己的操作，然后在 reducer 中添加控件，如下所示：

const addLanguageControlGroup = createAction(
  'MY_FORM/addLanguageControlGroup',
  (lang?: string, code?: string) => ({ lang, code }),
);

const myFormReducer = createReducer(
  {
    formState: createFormGroupState('MY_FORM', INITIAL_FORM_VALUE),
  },
  onNgrxForms(),
  on(addLanguageControlGroup, ({ formState }, { lang, code }) => ({
    formState: updateGroup(formState, {
      languages: addArrayControl({
        language: lang || '',
        code: code || '',
      }),
    }),
  })),
);

export class NgrxFormsExampleComponent {
  @Input() formState: FormGroupState<MyFormValue>;

  constructor(private actionsSubject: ActionsSubject) { }

  addLanguageControlGroup(lang?: string, code?: string) {
    this.actionsSubject.next(addLanguageControlGroup(lang, code));
  }
}

我希望这会有所帮助。

【讨论】：