当状态由ngrx-forms管理时，如何在angular中向formarray动态添加formgroup控件? [英] How to dynamically add formgroup controls to formarray in angular while the state is managed by ngrx-forms?

问题描述

我正在使用ngrx-forms库来管理表单状态.

I am using an ngrx-forms library for managing states of my form.

这是库: https://ngrx-forms.readthedocs.io/

对于我来说，简单的输入就可以很好地工作.但是当涉及到动态控件时，我不确定如何使用它.

It works well with simple inputs for me. But when it comes to dynamic controls, I am not sure how to use it.

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

For example, let's say we have a form:

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

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

now the languages controls looks like this :

{语言:，代码:"}

{language: '', code: ''}

当用户单击添加语言"按钮时，如何动态地将上述控件添加到表单构建器的语言数组中?我可以使用常规的FormBuilder来做到这一点.没问题.

How can I dynamically add the above control to the languages array of form builder when the user clicks add languages button? I can do it with a regular FormBuilder. No problem.

但是当使用结合ngrx-forms的ngrx管理状态时，如何创建一个reducer函数来动态添加语言控件?

but when it comes to managing state using ngrx coupled with ngrx-forms how can I create a reducer function to add language controls dynamically?

推荐答案

ngrx-forms a>在这里.

采用以下组件，通过上述组件使用 @ angular/forms 构建表单.

Take the following component that builds a form as you describe above with @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形式，该代码将是一个简化器(使用ngrx v8 +):

With ngrx-forms the code would be a reducer like this (using 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(),
);

在您的组件中，您可能会遇到类似这样的内容:

In your component, you could then have something like this:

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中，如下所示:

Instead of using the built-in AddArrayControlAction from ngrx-forms you could also create your own action and then add the control in the reducer, like this:

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));
  }
}

我希望这会有所帮助.

这篇关于当状态由ngrx-forms管理时，如何在angular中向formarray动态添加formgroup控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！