PrimeNG patchValue для автозаполнения - PullRequest
Новая
       7

PrimeNG patchValue для автозаполнения

0 голосов
/ 10 сентября 2018

Я пытаюсь динамически назначить значение для автозаполнения, но оно не работает

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>

интерфейс 

export interface ICenter{

   id: string,
   name: string
}

ц

(для field = "name" dataKey = "id" значение совпадает, поэтому 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 ******* ************************************************** ******** Получилось, вот как

center: {id: itimData.center, имя: itimData.center},

1 Ответ

0 голосов
/ 10 сентября 2018

Свойства 'field' и 'dataKey' не обязательно являются частью вашего объекта.

PrimeNG документы:

поле

Поле предлагаемого объекта для разрешения и отображения.

DataKey

Свойство для уникальной идентификации значения в опциях.

Если ваш список выглядит так: 

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

Тогда свойство 'field' должно ссылаться на 'name' и 'dataKey' на 'id' .

Теперь, если вы хотите установить значение автозаполнения в «Ананас», то patchValue выглядит следующим образом. 

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

Компонент PrimeNG будет искать объект с идентификатором, равным 3. При совпадении он установит выбор для этого объекта.

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

...