Как управлять большим количеством похожих реактивных форм в Angular

Question

Я занимаюсь разработкой проекта Angular 6, в котором есть множество форм.Одна группа FormGroup может содержать более 10 полей и может многократно использоваться в одном приложении.

Итак, я спрашиваю, как лучше организовать свое приложение?В настоящее время один form.component.ts содержит более 200 строк кода, из которых около 70% создается формой.

Есть ли способ разбить это на повторно используемые части?Я пытался создать класс с помощью метода static, который возвращает FormGroup, созданный FormBuilder, но это, похоже, не работает.

Это было примерно

export class myClass {
  constructor(private fb: FormBuilder) {}

  static createFormGroup(): FormGroup {
    this.fb.group({
      // some stuff goes here
    });
  }
}

Я не знаю, как с этим справиться, поскольку экземпляр не будет создан, поскольку он статичен.

Answer 1

Я думаю, что использование Динамические формы будет явным победителем здесь.Вот что говорят доктора:

Создание форм ручной работы может быть дорогостоящим и занимать много времени, особенно если вам нужно их много, они похожи друг на друга и часто меняются, чтобы соответствоватьбыстро меняющиеся деловые и нормативные требования.

Может быть более экономичным создание форм динамически на основе метаданных, описывающих модель бизнес-объекта.

Ваш случай представляется мне какточно такой же сценарий.Кроме того, я выложил руководство выше, поэтому вы должны получить Рабочий пример для этого прямо здесь.

Однако, другие ваши варианты:

1. Использование статического сервиса, который будет возвращать FormGroup с, который вы можете назначить непосредственно в вашей текущей форме.Это то, что вы уже пробовали, но без особого успеха, как видно из вашего вопроса.Вам нужно предоставить больше информации об этом, чтобы люди могли помочь вам.

2. Как предложил Жюльен, вы можете разбить ваш FormGroup на более мелкие компоненты и затем передать свой оригинал./ parent FormGroup как @Input для них.Затем они могут дополнительно добавить FormControl s или FormGroup s к тем оригиналам / родителям FormGroup.См. Это StackBlitz, например. Я создал, что демонстрирует нечто подобное.Это может стать более грязным, поскольку размер вашей формы растет.Поэтому в этом случае я бы предложил использовать динамические формы или вариант 1.