Wie wickelt man eine Primeng-Komponente wie Autocomplete mit reaktiven Formen?

Question

Ich mag eine primeng zum automatischen Vervollständigung Komponente in meiner eigenen Komponente wickeln, aber haw kann nicht herausfinden, einen formControlName zu bieten:

Fehler: Uncaught (in Versprechen): Fehler: formControlName mit einer Elternteil formGroup Richtlinie verwendet werden muß, .

Wrapper Komponente html:

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

Wrapper Komponente 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; } 
} 

Verwendung der Komponente in einem benutzerdefinierten für Komponente:

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

Answer 1

Sie haben den Code zu schreiben, in der HTML-Code, in den Sie die automatische Vervollständigung einbetten möchten.

`

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

`

und Code in Ihrer Komponente schreiben, wo Sie die Daten-Widget automatisch zu vervollständigen passieren.

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

In diesem Code Snapshot verwendete ich beobachtbaren statt Versprechen, aber sie versprechen können