reactive forms not bind dropdown if no interaction with form in angular

Question

I have a form include 3 dropdowns, this dropdown get their data from API The problem is the dropdown does not bind data if I don't click on dropdown (blur on any filed in form )

my HTML

<form [formGroup]="dropdownsForm" novalidate class="needs-validation">
<div class="dropdown">
              <select class="form-control" formControlName="CountryName" 
                [attr.data-live-search]="true" style="width: 150px;" >
                <option *ngFor="let Country of allCountrys" [value]="Country.id">
                  {{Country.title}}</option>
              </select>
</div>
</form>

My ts

allCountrys: DropDownListForLkpsDto[];

 constructor(
    private fb: FormBuilder,
    private _countryService: CountryServiceProxy
  ) {

  }

ngOnInit(): void {
this.dropdownsForm = this.fb.group(
      {
        CountryName: [""],
      }
    );


    this._countryService.getAllCountrysForDDl().subscribe(result => {
      this.allCountrys = result;

    });
}

You need to implement the use of async pipe in your code to achieve what you want (you aren't unsubscribing either) , read more about it here: angular.io/api/common/AsyncPipe — HellaSpace
– HellaSpace, Commented Nov 23, 2021 at 9:52
@HellaSpace Thanks for your replay, it works fine, but what If I need to add some code in subscribe after I assign the result to my list (Which is the real case in my scenario) — Radwa
– Radwa, Commented Nov 24, 2021 at 8:01
You can unsubscribe on ngOnDestroy which is the usually the most common way to go around it, have a look at Solution #1 here: blog.bitsrc.io/… — HellaSpace
– HellaSpace, Commented Nov 24, 2021 at 17:06

Radwa · Accepted Answer · 2021-11-24 15:55:39Z

1

After 3 days of search, we finally find the issue in my ts file, I have this line changeDetection: ChangeDetectionStrategy.OnPush into my @Component({ }) when we remove changeDetection line it works fine

answered Nov 24, 2021 at 15:55

Radwa

651 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

reactive forms not bind dropdown if no interaction with form in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related