Angular2 Reactive Form - 其他組件中的表單控件

我們有一個組件，它具有表單（我們稱之爲預訂表單），在另一個組件中我們有一個html表單（我們稱之爲lookup）我們做了額外的邏輯 - 它在一個組件中，因爲我們想再次使用相同的功能。Angular2 Reactive Form - 其他組件中的表單控件

問題是我似乎無法獲取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).

任何幫助將是很大的不勝感激！

來源

2017-02-21 Jjj

您應該將嵌套的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

來源

2017-02-21 14:58:34 Alex

Angular2 Reactive Form - 其他組件中的表單控件

回答

相關問題