Angular2 как записать данные input в под-элемент?

Question

[reaget]

Чтобы было понятнее.

Есть форма. Я получаю данные этой формы. formGroup выглядит таким образом (обратите внимание на объект контакты, во втором случае они есть)

this.createForm = this.fb.group({
    username: [''],
    password: [''],
    firstName: [''],
    lastName: [''],
    patronymic_name: [''],
    birthday: [''],
    gender: [''],
    taxation_id: [''],
    appointment: [''],
    snils: [''],
    telephones: ['', []],
    emails: ['', []],
    postals: ['', []]
});

А нужно чтобы структура formGroup выглядела так

this.createForm = this.fb.group({
    username: [''],
    password: [''],
    firstName: [''],
    lastName: [''],
    patronymic_name: [''],
    birthday: [''],
    gender: [''],
    taxation_id: [''],
    appointment: [''],
    snils: [''],
    contacts: {
        telephones: ['', []],
        emails: ['', []],
        postals: ['', []]
    }
});

Как можно такое сделать?

И немного HTML

<form [formGroup]="createForm">
    <section>
        <label class="input">
            <span>Email:</span>
            <i class="icon-append fa fa-unlock-alt"></i>
            <input type="text" name="firstName" placeholder="" formControlName="emails">
            <b class="tooltip tooltip-bottom-right">{{'Needed to verify your account' | i18n }}</b>
        </label>
    </section>
    <section>
        <label class="input">
            <span>Адрес проживания:</span>
            <i class="icon-append fa fa-unlock-alt"></i>
            <input type="text" name="firstName" placeholder="" formControlName="postals">
            <b class="tooltip tooltip-bottom-right">{{'Needed to verify your account' | i18n }}</b>
        </label>
     </section>
</form>

Answer 1

[Sasha Novik]

Полем внутри FormGroup может быть как FormControl, так и еще один FormGroup.

И тогда билд формы будет выглядеть так:

this.createForm = this.fb.group({
    ...
    contacts: this.fb.group({
        telephones: ['', []],
        emails: ['', []],
        postals: ['', []]
    })
});

Html:

<form [formGroup]="createForm">
   <div formGroupName="contacts">
      ...
     <input type="text" name="firstName" placeholder="" formControlName="emails">
     ...

Comments

[reaget]

Спасибо большое за Ваш ответ!