<ng-select>在更改表单组控制值后仍然 null，如果 searchTerm 以编程方式提供</ng-select>

Question

I have requirement to set searchTerm value Programmatically(using Virtual keypad) and search the dropdown should show searchterm based options.

where form control is updateOn:'blur'.

But here i am facing issue like form control is not getting updated after selecting dropdown option based on searchTerm provided by virtual input key(in example stackblitz red color text control value is null).

Steps:

1.press virtual key pad button

2.select any option

3.now check red color text value:

Thanks.

Answer 1

It is getting updated, but you are using before it is updated. Even if you open the <ng-select> yourself, it will show different values in black and red.

If you can , I'd suggest for you to use change.id instead:

    this.afterChangesFormControlValue = change.id;

But if you can't... if you wrap it inside a setTimeout() , even with a 0 delay, it will start working, since the setTimeout will be triggered only after the update is done:

  setTimeout(() => {
    console.log('on select option after given search term from virtual keyboar')
    console.log("change:",change)
    console.log("form control value:",this.form.controls.example.value)
    this.afterChangesFormControlValue=this.form.controls.example.value;
  }, 0);

Both should produce the same results - they did when I tested in your Stackblitz, but setTimeout is a bit unsightly.