PrimeNG Autocomplete and Binding for Preselect to Object within FormGroup

Question

So I was writing this question when I figured out the answer, but thought I would post the question here for someone else.

How do you bind a complex object to a PrimeNG autocomplete field so you can preselect a value in that field, get an associated property from the selected object bound to the autocomplete when you return the form? In the example below, siteObj represents the complex object bound to the autocomplete while siteName is the field from within that object that displays in the UI. Sites is a collection of the complex object.

Autocomplete

<p-autoComplete [suggestions]="sites" field="siteName" formControlName="siteObj"
                                                      (completeMethod)="getFilteredItems($event)" 
                                                      appendTo="body" [minLength]="3"></p-autoComplete>

xyntiacat xyntiacat · Accepted Answer · 2017-05-31T16:22:49

So here's what I figured out:

FormGroup needs to look like this:

this.seriesObjectForm = this.formBuilder.group({
        seriesID: [''],
        siteObj: {
            siteID: [''],
            siteName: ['']
        },
        variableID: [''],
        etlTypeID: ['']
    })

Preselecting looks like this:

this.seriesObjectForm.patchValue({
        seriesID: series.seriesID, siteObj: {siteID: series.siteID, siteName: series.siteName }, variableID: series.variableID, etlTypeID: ''
    });

Getting values from the form looks like this:

var newItem = new Series(series.seriesID, series['siteObj']['siteID'], series['siteObj']['siteName'], series.variableID, series.etlTypeID)

PrimeNG Autocomplete and Binding for Preselect to Object within FormGroup

1 Answers