CODEWITHSUNDEEP
angularangular5angular2-formsangular4-forms
Anonymus_goat
Anonymus_goat

Reputation: 339

ngModel doesn't display the value of an object in mat-select

I have a company class, it has an headquarter's address field. The address is an interface, it has an another object, country, which is an another interface. In my database I store all the countries. I have a view for editing a selected company, there I can set or change the headquarter's address and I created a mat-select for the countries:

<mat-select [(ngModel)]="company.headquarter.country">
    <mat-option *ngFor="let country of companyService.countries" [value]="country">
        {{country.name}}
    </mat-option>
</mat-select>

This code save the selected country to the headquarter's country field, but if I want to edit the same company the mat-select doesn't display the actual value. how can I solve this problem?

Edited:

If I change the ngModel to company.headquarter.country.id and the [value] to country.id, then it works fine, but to store the country's code or name I have to write a method, which will find the country by the id in the companyService.countries array and set this country to the company.headquarter.country's field. So it is not a good solution.

Upvotes: 6

Views: 9415

Answers (2)

Yerkon
Yerkon

Reputation: 4788

This code save the selected country to the headquarter's country field, but if I want to edit the same company the mat-select doesn't display the actual value. how can I solve this problem?

The problem is when you mat-select compares two object, their references can be different. Use compare function to compare your object by some mark like id.

To customize the default option comparison algorithm, supports compareWith input. compareWith takes a function which has two arguments: option1 and option2. If compareWith is given, Angular selects option by the return value of the function.

Template:

 <mat-form-field>
              <mat-select [(value)]="contract.company"
                          panelClass="example-panel-dark-blue"
                          [compareWith]="helper.compareById">

                <mat-option *ngFor="let cust of customers"
                            [value]="cust"> {{cust.title}}
                </mat-option>
              </mat-select>
  </mat-form-field>

Code:

 compareById(f1: Common.Item, f2: Common.Item): boolean {
     return f1 && f2 && f1.id === f2.id;
 }

Official Doc

Upvotes: 11

Tomasz Kula
Tomasz Kula

Reputation: 16837

Change [(ngModel)] to [(value)].

<mat-select [(value)]="company.headquarter.country"> 
  <mat-option *ngFor="let country of companyService.countries" [value]="country"> {{country.name}}
   </mat-option>
</mat-select>

Upvotes: 1

Related Questions