Angular material form field is not updating when changing values in the component

Question

Im running into a problem when updating the bound value of an angular material drop down in ng on init. The weird part is that ALL other dropdowns update correctly, but the the "selectedCategory" doesn't. Something I tried is updating one at a time and see where it fails. If I update just the first three (selectedCenter, selectedOrg and selectedCategory) all dropdowns update correctly. When I do all values, thats when I run into the problem. I thought it might had to do with everything not running async, so I went ahead and make everything promise based. Still no luck. Any thoughts of what it might be causing it? Is it a bad behavior from angular material?

Here is the code ts component onInit

async ngOnInit() {
    this.isLoading = true;

    await this.assesmentService.fetchCenters().subscribe((data) => {
      this.centers = data.centers;
    });
    await this.assesmentService.fetchDropDownOptions().subscribe((data) => {
      this.dropDownOptions = data.data;

      if (this.sessionData.length > 0) {
        this.selectedCenter = this.sessionData[0].loc_cd;
        this.handleCenterSelected().then(() => {
          this.selectedOrgType = this.sessionData[0].org_type;
          this.handleOrgSelected().then(() => {
            this.selectedCategory = this.sessionData[0].category_cd;
            this.handleCategorySelected().then(() => {
              this.selectedSubCategory = this.sessionData[0].category_sub_cd;
              this.handleSubCategorySelected()
          });
        });
      }
      this.isLoading = false;
    });
  }

Here is the HTML code:

<div style="display: flex; align-items: center">
            <div class="formDiv">
              <mat-form-field appearance="fill" class="custom-mat-form-field">
                <mat-label>Service Center</mat-label>
                <mat-select
                  [(ngModel)]="selectedCenter"
                  name="center"
                  required
                  (selectionChange)="handleCenterSelected()"
                >
                  <mat-option
                    *ngFor="let center of centers"
                    [value]="center.loc_cd"
                  >
                    {{ center.loc_cd }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>

            <div class="formDiv">
              <mat-form-field appearance="fill" class="custom-mat-form-field">
                <mat-label>Org Type</mat-label>
                <mat-select
                  [(ngModel)]="selectedOrgType"
                  name="orgType"
                  required
                  (selectionChange)="handleOrgSelected()"
                >
                  <mat-option
                    *ngFor="let orgType of orgTypes"
                    [value]="orgType.value"
                  >
                    {{ orgType.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="formDiv">
              <mat-form-field appearance="fill" class="custom-mat-form-field">
                <mat-label>Category</mat-label>
                <mat-select
                  class="myDropdown"
                  [(ngModel)]="selectedCategory"
                  [(value)]="selectedCategory"
                  name="category"
                  (selectionChange)="handleCategorySelected()"
                >
                  <mat-option
                    *ngFor="let category of categories"
                    [value]="category"
                  >
                    {{ category }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>

            <div class="formDiv">
              <mat-form-field appearance="fill" class="custom-mat-form-field">
                <mat-label>Sub Category</mat-label>
                <mat-select
                  [(ngModel)]="selectedSubCategory"
                  name="category"
                  required
                  (selectionChange)="handleSubCategorySelected()"
                >
                  <mat-option
                    *ngFor="let subCategory of subCategory"
                    [value]="subCategory"
                  >
                    {{ subCategory }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <!-- [disabled]="!selectedCenter || !selectedOperation" -->
          </div>

I'm trying to update the value of an angular material dropdown. When I do it, some of the dropdowns update and there is only one that doesnt. They should all update.

score 1 · Answer 1 · answered Jul 01 '23 at 04:25

Have a look at this post async/await in Angular `ngOnInit`.

I haven't tried your coded, but I have already run into similar problems with async ngOnInit(). As the above link describes, be careful using async code in ngOnInit and keep in mind, that the framework will not wait for asnyc calls in ngOnInit to complete before continuing setting up your component.

I also use async code in ngOnInit function, I always use promise-based calls and write them like this

myPromise.then();

I do this to simply make clear, when reading the code, that 'nobody' waits for the promise to complete.

I do not think is an asynchrony problem though. – Juan Marino Jul 01 '23 at 14:47 — Juan Marino, Jul 01 '23 at 14:47

score 0 · Answer 2 · answered Jul 01 '23 at 19:09

0

On the html template, I was binding the name the wrong way. I had category for both. Should have been category and subcategory respectively

answered Jul 01 '23 at 19:09

Juan Marino

11
4

Angular material form field is not updating when changing values in the component

2 Answers2