setValue() does not work for nb-select component

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior:

Setting the value of nb-select programmatically sets the value on Reactive Form control but nb-select does not display it.

Expected behavior:

nb-select displays the value set programmatically.

Steps to reproduce:

• Create Reactive Form
• Add nb-select to the form
• Set object value to the -nb-select

Related code:

<form [formGroup]="form">
  <nb-select formControlName="user">
    <nb-option *ngFor="let u of users" [value]="u">{{u.name}}</nb-option>
  </nb-select>
</form>

this.form = this.fb.group({
  user: ['']
});
this.form.get('user').setValue({ name: 'Maihan', age: 55, gender: 'Male' });
this.form.controls['user'].patchValue(
  { name: 'Maihan', age: 55, gender: 'Male' }
)

StackBlitz StackBlitz Seed Project

[vitmaraliaga]

Try with this setTimeout(): function.

setTimeout(() => {
              this.myForm.get('control').patchValue('new-value');
            }, 0);

[Tibing]

Hi @maihannijat, from my point of view, nb-select works as expected. Regarding the setValue(), as I see it, you’re providing values for nb-option’s as references to objects from users array. And then, passing the different object with different reference to the setValue() method. nb-select internally compares items by reference using plain === operator. So, in your case, please, pass user’s id’s as values to nb-option’s like that one:

 <nb-option *ngFor="let u of users" [value]="u.id">{{u.name}}</nb-option>

and then call setValue() with the appropriate user.id.

Or just pass the same user object like so:

this.form.get('user').setValue(this.users[0]);

Regarding the reset method. As I see it, it’s a private method of nb-select. And when it’s used internally, nb-select also calls markForCheck() after the call. So, you have to mark the component as dirty after calling that method. By the way, I don’t think you have to use it 😃