Question

我们有一个组件，上面有表格（我们称之为预订表格），在html表格里面我们有另一个组件（我们称之为查找）我们做了额外的逻辑 - 而且它是＆＃39 ; s在一个组件中，因为我们想再次重用相同的功能。

问题是我似乎无法在查找组件中使用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传递给您的子组件，而不是“整个”formGroup。以下是

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

应该是：

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

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

<div formGroupName="lookupViewModel">

它应该是formGroup：

<div [formGroup]="lookupViewModel">

Sample plunker

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

1 个答案: