Custom components in Angular 2 form?

Question

Angular

I have a large form that has more than 10 inputs. Is it possible to break all the inputs into components while retaining the functionality of the FormBuilder ?
So now:

<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>

So I would like:

<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

Let's say you create a form group with one more nested group:

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

And then it simply passes the input as a parameter to the nested group in your component:
in my-title-component :
That's it)

Answer 2

Most likely, you do not understand the architecture of your application. In Angular 2, all independent sections that have a completed assignment and can be reused are taken out into a separate component. If there are many properties that are displayed in a similar way, it is better to iterate over them in a loop. If you get a large form with unique fields, there is nothing wrong with putting the template into one hefty html file.

Answer 3

You can break it, but the controls from nested components will not be registered in the main form. Thus, validation, for example, will not work. And just adding them to the form will not work. So either put up with it, or use all sorts of cunning workarounds. I have not seen a ready solution. More about the issue here: https://github.com/angular/angular/issues/12504