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