Programmatically selecting value for PrimeNG AutoComplete in reactive form

6
votes

I'm using the PrimeNG AutoComplete component in my reactive ng5 form. I've been unable to find a way to re-load the form values on page load and set the AutoComplete to a value.

The AutoComplete is mapped to an array of objects. I use the field property to tell it which field to display. What I want to pass back to my API is actually a different property. Because the AutoSelect is setting the FormControl value to the entire object I'm able to grab the property I need, although I wish there was a way to have it just set the value to the property I need. But my real problem is that I can't select a value.

I've tried:

  • setValue/patchValue (setting to a POJO and a value that matches the field - neither work)
  • setting a default value when I create the FormControl

This is what the HTML looks like:

 <form [formGroup]="preferences">
    <div class="row" style="padding-top:25px;">
      <div class="col-md-12">
        <div>
          <h3>Station</h3>
          <p>Station (or UTC) to use for time on graphical displays. Start typing for options:</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1">
        <p-autoComplete formControlName="station" [suggestions]="filteredStations" (completeMethod)="filter($event)" field="code" [size]="30"
            placeholder="Station" [minLength]="1" forceSelection="true"></p-autoComplete>
      </div>
    </div>
    ...

And the reactive form:

 this.preferences = this.formBuilder.group({
      station: new FormControl(),
      timeDisplay: new FormControl('utc'),
      itemsPerPage: new FormControl('7')
    });

I've tried various ways of setting the value but nothing ends up showing up in the UI.

this.preferences.controls['station'].setValue( {
          stationID: 0,
          code: 'UTC',
          description: 'UTC',
          isActive: true,
          modifiedBy: '',
          modifiedOn: '',
        });

There seems to be a lot of open threads on PrimeNGs forum about this and I have yet to find anything online that uses this with a reactive form. Advice would be appreciated!

TL;DR: I can't programatically populate the PrimeNG AutoComplete in my reactive form. Any examples of how to do this would be appreciated.

3
angularprimeng

3 Answers

2
votes

I ended up somewhat solving this problem by using a plain array of strings to populate the autocomplete instead of an array of objects.

Once I removed the field attribute from p-autocomplete I was able to programatically set the the value in the autocomplete using any of the normal methods for changing a form value.

<p-autoComplete formControlName="station" [suggestions]="filteredStations" (completeMethod)="filter($event)" [size]="30"
            placeholder="Station" minLength="1" maxlength="3" forceSelection="true"></p-autoComplete>

this.preferences.patchValue({ station: preferences.station }, { emitEvent: false });

This is a working solution for my current scenario that I can get by with for now. I am still hoping to find a solution that will allow me to use more complex data with their autocomplete while still being able to populate the value myself on page load.

1
votes

No need to remove the field attribute...

For a declaration, in the html, like this

<p-autoComplete field='AttributeValueDisplayName' dataKey='AttributeValue' formControlName="EOM_DT" [suggestions]="filteredEOM_DTs" (completeMethod)="filterLookup($event,'EOM_DT')" [minLength]="1" placeholder="Select Month End" [dropdown]="true" [autoHighlight]="true" [forceSelection]="true" (onFocus)="onFocus($event)" (click)="onFocus($event)" (onSelect)="onLookupSelected($event,'EOM_DT')" dropdownMode="blank" id="EOM_DT"></p-autoComplete>

I could pre-select by filling in the drop-down this way:

this.paramsForm.patchValue({ EOM_DT: {"AttributeValueDisplayName": '(blank)', "AttributeValue": ''}});
1
votes

I had a similar issue. I wanted to set the default value and I wanted to update it. Removing field attribute fixed the issue. But I was not able to update by selecting auto populate value. You can use field attribute along with dataKey attribute to add patch values into reactive form primeng autocomplete.

in html

 <p-autoComplete formControlName="station" [suggestions]="filteredStations" (completeMethod)="filter($event)" field="code" dataKey="code" [size]="30"
            placeholder="Station" [minLength]="1" forceSelection="true"></p-autoComplete>
      </div>

in ts

this.preferences.patchValue({
station:{
code:<default value>
}
})