Issue

This Content is from Stack Overflow. Question asked by Joel Mulé

I have an array of “addresses” and i show them like this.

<mat-form-field *ngIf="useSubstituteAddress" class="contact-form">
  <mat-label>Ersatz Adresse</mat-label>
  <mat-select [formControl]="contactDataForm.get('address')?.get('substituteAddress')! | asFormControl">
    <mat-option *ngFor="let address of assosiatedAddresses" [value]="address">
      {{address.postalcode}} {{address.city}}, {{address.street}} {{address.housenumber}}
    </mat-option>
  </mat-select>
</mat-form-field>

Im getting a substituteAddress from my backend and my goal is to display this address into my select.

So im doing this:

if (this.contactData.substituteAddress) {
            this.useSubstituteAddress = true;
            this.addressService.getAddressById(Number(this.contactData.substituteAddress?.id)).subscribe((address) => {
                this.contactDataForm.get('address')?.get('substituteAddress')?.setValue(address);
            });
        }

If I console.log through my Form it show’s the information.

My Form is looking like this:

contactDataForm = new FormGroup({
    address: new FormGroup({
        street: new FormControl('', Validators.required),
        housenumber: new FormControl('', Validators.required),
        postalcode: new FormControl('', Validators.required),
        city: new FormControl('', Validators.required),
        addressAddition: new FormControl(''),
        country: new FormControl('', Validators.required),
        contactAddress: new FormControl(true),
        substituteAddress: new FormControl()
    }),
    contact: new FormGroup({
        id: new FormControl(''),
        email: new FormControl('', Validators.required),
        phoneNumber: new FormControl(''),
        mobileNumber: new FormControl(''),
        notificationsEnabled: new FormControl(true),
        contactAddress: new FormControl()
    })
});

When i visit my Website it should look like this.
Select View

But it just showing a blank Select.

Does somebody engaged this problem?

Solution

This is because by default MatSelect uses strict equality operator to compare the value with the list of possible values. If the value is not on the list, it won’t be displayed. Since both are objects, it checks for reference equality, so it needs to be the same object.

What you can do is use the compareWith function on MatSelect (docs here). Then it will use the provided function to check for equality between two objects.

We don’t know what your address is, but it seems like it contains an id, so you could do something along the way of:

compareFn(a: Address, b: Address): boolean {
  return a.id === b.id;
}

And in your template bind compareWith to the function:

<mat-form-field *ngIf="useSubstituteAddress" class="contact-form">
  <mat-label>Ersatz Adresse</mat-label>
  <mat-select [compareWith]="compareFn" [formControl]="contactDataForm.get('address')?.get('substituteAddress')! | asFormControl">
    <mat-option *ngFor="let address of assosiatedAddresses" [value]="address">
      {{address.postalcode}} {{address.city}}, {{address.street}} {{address.housenumber}}
    </mat-option>
  </mat-select>
</mat-form-field>

This Question was asked in StackOverflow by Joel Mulé and Answered by TotallyNewb It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.