反応型を使用してオートコンプリートのような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; } 
} 

用途：

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

Answer 1

あなたは、コードを記述する必要がオートコンプリートを埋め込むHTML。

`

<span class="ui-fluid"> 
<p-autoComplete formControlName="autoComplete"field="label"completeMethod)="search($event)"> 
</p-autoComplete> 
</span> 
<ul> 
    <li *ngFor="let s of autoComplete">{{s.label}} 
    </li> 
</ul> 

`

、あなたがオートコンプリートウィジェットにデータを渡しますどこのコンポーネントにコードを記述します。このコードのスナップショットで

autoComplete  = new FormControl(null, []);search(event){this.receiptDiarizationFacade.getSubjects(event.query).subscribe(value=>this.autoComplete=value); 
} 

、私の代わりに約束の観察可能な使用ができますが、約束

を使用することができます