Кастомные компоненты в форме Angular 2?

Question

[Coder321]

У меня есть большая форма, в которой больше 10 инпутов. Можно ли разбить все инпуты на компоненты при этом сохранив функционал FormBuilder ?
Так сейчас:

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
    <div class="inlineBlock">
      <label for="titleInput">Title</label>
      <input type="text" id="titleInput" placeholder="Title" [formControl]="myForm.get('title')" [(ngModel)]="title">
    </div>
    <button type="submit">Submit</button>
  </form>

Так хотелось бы:

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
        <my-title-component></ my-title-component>
    <button type="submit">Submit</button>
  </form>

<!--my-title-component template-->
    <div class="inlineBlock">
      <label for="titleInput">Title</label>
      <input type="text" id="titleInput" placeholder="Title" [formControl]="myForm.get('title')" [(ngModel)]="title">
    </div>

Answer 1

[SergeyBugai]

Допустим создаете форм групу с еще одной вложеной групой :

this.myForm= this.fb.group({
      'checboxGroup': this.fb.group({
        'first': [false],
        'second': [false]
      })
    });

А дальше просто передает инпут параметром вложеную групу в ваш компонент :

<my-title-component [checboxGroup]="myForm.controls['checboxGroup']"></ my-title-component>

в my-title-component :
@Input() checboxGroup: FormGroup
Вот и все)

Answer 2

[Виталий]

Скорее всего, вы не понимаете архитектуру своего приложения. В Angular 2 все самостоятельные участки, которые имеют завершённое назначение и могут использоваться повторно, выносятся в отдельный компонент. Если имеется множество свойств, которые отображаются примерно одинаково, лучше их перебирать в цикле. Если же получается большая форма с уникальными полями, нет ничего плохого в том, чтобы вынести шаблон в один увесистый html файл.

Answer 3

[Руслан Лопатин]

Разбить-то можно, вот только контролы из вложенных компонентов не будут зарегистрированы в главной форме. Таким образом, валидация, например, работать не будет. И просто так добавить их в форму не получится. Так что либо смиритесь, либо используйте всякие хитрые обходные манёвры. Готового решения я не встречал. Подробнее о проблеме здесь: https://github.com/angular/angular/issues/12504