PrimeNG patchValue for autocomplete

Question

I am trying to assign a value dynamically to auto-complete but it is not working

HTML

<label for="centerId" class="control-label">Center</label>
                                    <p-autoComplete formControlName="center" id="centerId"  [suggestions]="iCenter" placeholder="Center (required)" (completeMethod)="searchCC($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

interface

export interface ICenter{

   id: string,
   name: string
}

ts

(for field="name" dataKey="id" the value is the same, so id=name)

iCenter: ICenter[];

also confirmed there is a value 
console.log(this.center)
    searchCC(event) {

    this.iCenter = this.iCenter
        .filter(data => data.name.toString()
            .toLowerCase()
            .indexOf(event.query.toString().toLowerCase()) !== -1);

}
 this.ersaForm = this._fb.group({
        center: ['', Validators.required],
    });

 this.ersaForm.patchValue({

            //also tried  center:center
          //also tried center: [itimData.center, itimData.center],
            center: [{ 'field': this.center,'dataKey': this.center}],
            phone: itimData.phone,
            email: itimData.email
        });

***************************************UPDATE***************************************************************** Got it working , here is how

center: {id: itimData.center, name: itimData.center },

Bad tagging, please correct – Kukeltje Sep 10 '18 at 17:07 — Kukeltje, Sep 10 '18 at 17:07

score 4 · Accepted Answer · answered Sep 10 '18 at 17:49

4

The properties 'field' and 'dataKey' are not necessarily part of your object.

PrimeNG docs:

field

Field of a suggested object to resolve and display.

dataKey

A property to uniquely identify a value in options.

If your list looks like this:

const items = [
    {id: 1, name: 'Apple'}, 
    {id: 2, name: 'Banana'}, 
    {id: 3, name: 'Pineapple'}
];

Then the property 'field' should refer to 'name' and 'dataKey' to 'id'.

Now if you want to set the value of the autocomplete to 'Pineapple' then patchValue looks like this.

this.form.patchValue({
    item: {
        id: 3, // mandatory
        name: 'Pineapple' // optional
    }
});

The PrimeNG component will search for an object with the id equal to 3. When there is a match he will set the selection to that object.

https://www.primefaces.org/primeng/#/autocomplete

answered Sep 10 '18 at 17:49

Ruben Vermeulen

411
2
8

updated my above code. (original post & update section)I am using interface this.iCenter:{id: itimData.center, name: itimData.center }, it does not work..see original post – rgoal Sep 10 '18 at 18:25
i should have something like this center:{ 'id': itimData.center, 'cost_name': itimData.center }, – rgoal Sep 10 '18 at 18:30
also tried center: [this.iCenter = [{ id: itimData.center, name: itimData.center }]], no errors but nothing happened – rgoal Sep 10 '18 at 20:25
updated my code above.fixed the issue but another function broke – rgoal Sep 10 '18 at 20:48
Can you elaborate on what's broken now? If it has nothing to do with this issue, it may be a good idea to create another question. – Ruben Vermeulen Sep 10 '18 at 21:55
updated my above code...according to the documents you bind autocomplete to an object like this: iCenter: ICenter[]; originalCenter: ICenter[] so i cant do iCenter:{id:1, name'john'} inside the ersaForm.patcValue – rgoal Sep 10 '18 at 22:20
got it working, had other issues that were causing it not to work – rgoal Sep 11 '18 at 20:18
1

marked it as an answer...since you put me in the right direction :) – rgoal Sep 11 '18 at 20:20

PrimeNG patchValue for autocomplete

1 Answers1