Angular2 Reactive Form - 其他组件中的表单控件

Question

我们有一个组件，上面有表单（我们称之为预订表单），在 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).

如有任何帮助，我们将不胜感激！

Answer 1

您应该将嵌套的 formGroup 传递给您的 child 组件，而不是 "whole" formGroup。所以下面

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

应该是：

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

并且在您的 child 视图中而不是：

<div formGroupName="lookupViewModel">

应该是 formGroup:

<div [formGroup]="lookupViewModel">

Sample plunker

Angular2 Reactive Form - 其他组件中的表单控件

Angular2 Reactive Form - Form Controls In Other Component

angular

angular-reactive-forms