2017-02-21 23 views
0

フォームにはコンポーネントがあります(これを予約フォームと呼びます)。また、htmlフォームの内部に別のコンポーネントがあります(これをルックアップと呼びます)追加ロジックを行います。同じ機能を再利用したいので、コンポーネント内に追加ロジックを追加します。Angular2反応性フォーム - フォームコントロール他のコンポーネント

問題は、lookupコンポーネントで機能するformGroupNameまたはformControlName属性を取得できないようです。

この予約フォームのHTML

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

これはコンソールに表示されるエラーが

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). 

あるすべてのヘルプは非常になり、ルックアップ・コンポーネントのHTML

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

です感謝!

答えて

3

"全体" 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

関連する問題