Page 1 of 1

autocomplete with Reactive Forms

Posted: 04 Oct 2019, 21:18
by psenechal
I'm a little baffled reading all of the posts in this forum and search results in stack overflow that this issue has never been addressed.

I can get autocomplete working when binding it to ngModel, but it absolutely refuses to populate the default form value with formControlName, even though the documentation clearly states that it can be used with Model Driven Forms.

I even tried reducing the form value and the available list of values to simple strings instead of objects and it will not populate the default form value.

Code: Select all

<form [formGroup]="wineForm" (ngSubmit)="wineForm.valid && saveWine()" #f="ngForm" autocomplete="off">
    <p-autoComplete inputId="vintner" formControlName="vintner" [suggestions]="vintners" (completeMethod)="getVintners($event.query)" [forceSelection]="true" [minLength]="1" [dropdown]="true" dropdownMode="current" field="name" dataKey="id" required></p-autoComplete>
</form>
My form group has a "vintner" property which is a Vintner object with id and name properties. The form group is populated OnInit and outputting the form group value to the screen using {{wineForm.get('vintner').value | json}}, I can clearly see the Vintner object populated in the form group.

Is there something I'm missing about this or does it just not work and isn't going to be fixed? Thanks