0

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

任何帮助将不胜感激！

4

1 回答 1

3

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

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

应该：

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

并在您的子视图中，而不是：

<div formGroupName="lookupViewModel">

它应该是formGroup：

<div [formGroup]="lookupViewModel">

样品冲撞器

于 2017-02-21T14:58:34.180 回答