Реактивная форма Angular2 — элементы управления формой в другом компоненте

У нас есть компонент, на котором есть форма (мы назовем ее формой бронирования), а внутри html-формы у нас есть другой компонент (мы назовем это поиском), мы делаем дополнительную логику - и она находится в компоненте, когда мы хотите повторно использовать ту же функциональность снова.

Проблема в том, что я не могу заставить атрибуты formGroupName или formControlName работать в компоненте поиска.

Это форма бронирования html

<form (ngSubmit)="onSubmit()" [formGroup]="bookingForm">
    <div class="row">
        <app-lookup [form]="bookingForm"></app-lookup>
    </div>
</form>

Это компонент поиска html

<div class="input-field col s12"> 
    <div formGroupName="lookupViewModel">
        <input formControlName="lookupResults{{id}}" id="lookup{{id}}"> 
    </div>
</div>

Ошибка, которая появляется в консоли,

Unhandled Promise rejection: Error in ./LookupComponent class LookupComponent - inline template:1:6 caused by: formGroupName must be used with a parent formGroup directive.  You'll want to add a formGroup
      directive and pass it an existing FormGroup instance (you can create one in your class).

Любая помощь будет принята с благодарностью!


angular reactive-forms
person Jjj    schedule 21.02.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны передать вложенный formGroup вашему дочернему компоненту вместо "целого" formGroup. Итак, следующее

<app-lookup [form]="bookingForm"></app-lookup>

должно быть:

<app-lookup [form]="bookingForm.controls.lookupViewModel"></app-lookup>

и в вашем дочернем представлении вместо:

<div formGroupName="lookupViewModel">

это должно быть formGroup:

<div [formGroup]="lookupViewModel">

Образец плунжера

person AJT82    schedule 21.02.2017