primeng - 反応フォームを使用してオートコンプリートのようなprimengコンポーネントをラップする方法は?

Question

自分のコンポーネントにprimengオートコンプリートコンポーネントをラップしたいのですが、formControlNameを提供する方法がわかりません:

エラー: キャッチされていません (約束されています): エラー: formControlName は、親の formGroup ディレクティブと共に使用する必要があります。

ラッパー コンポーネント html:

<p-autoComplete
  [formControlName]="formControlName"
  [suggestions]="suggestions"
  [multiple]="multiple"
  [dropdown]="dropdown"
  (completeMethod)="search($event)">
</p-autoComplete>

ラッパー コンポーネント ts:

@Component({
  selector: 'logi-autocomplete',
  templateUrl: 'autocomplete.component.html',
  providers: [AUTOCOMPLETE_VALUE_ACCESSOR]
})
export class AutocompleteComponent implements OnInit, ControlValueAccessor {

  @Input() formControlName: string;

  @Input() multiple = true;
  @Input() dropdown = true;

  // Skipped non related code

  _value: any = '';
  get value(): any { return this._value; };
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

  writeValue(value: any) {
    this._value = value;
    this.onChange(value);
  }

  onChange = (_) => {};
  onTouched = () => {};
  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

カスタム for コンポーネントでのコンポーネントの使用:

<form [formGroup]="form">
    <logi-autocomplete
      [formControlName]="'groups'"
    ></logi-autocomplete>
</form>