How to set value in angular mat-select when component loading?

Question

I used angular material("@angular/material": "7.1.0") mat-select box and then i used form control instead of ng model, now the problem is i can't set the value when the component is loading. I need to set the first value to mat-select box from the list, i tried but i cant do that.

I have created a code at stackblitz, here is the link: https://stackblitz.com/edit/angular-zt1a9f

please help me on that.

Answer 1

Use compareWith to select the default value by comparing the name inside the compare function. Also note, I've changed value binding to [(value)] ="animal". And removed selectedValue. You select the default by assigning it in the formControl, look below changes in the component.

<form [formGroup]="myGroup">
<mat-form-field>
  <mat-select placeholder="Favorite animal" [compareWith]="compareThem" formControlName="animalControl" required >
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [(value)] ="animal"  >
      {{animal.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

In your component, add:

export class AppComponent  {

  animals = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];  

  myGroup = new FormGroup({
      animalControl: new FormControl(this.animals[1], [Validators.required]) //I'm assigining Cat by using this.animals[1], you can put any value you like as default.
  });


  compareThem(o1, o2): boolean{
    console.log('compare with');
    return o1.name === o2.name;
  }
}

Answer 2

Thilagabahan, if the [value] is animals.name

<mat-option *ngFor="let animal of animals" [value]="animal.name">

simply, when you create the form, give the value (else take a look Aragom's answer)

    selectedValue = this.animals[0].name;
    myGroup = new FormGroup({
      animalControl: new FormControl(this.selectedValue, [Validators.required])
  });

See that the last one is create the formGroup

Answer 3

As you are assigning the whole animal object to the value of mat-option, then in this case
you have to use two way data binding for providing the selected option value.

Use 2 way data binding as [(ngModel)]="selectedValue"
instead of [(value)]="selectedValue" in your application code, and this variable selectedValue will be of type animal object that you are assigning to the mat-option as

<mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
</mat-option>`

And now, assign this variable in ngOnint() as

ngOnInit() {
  this.selectedValue =  this.animals[0]; // selecting first aninmal object as default value
}

Stackblitz Demo - setting mat-select value at Component Loading

Answer 4

Here is the example

<mat-select [compareWith]="compareFn" [(ngModel)]="defaultItem">
    <mat-option *ngFor="let country of countries" [value]="item">
        {{country.name}}
    </mat-option>
</mat-select>

compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

In case your options is not containing the id then your compareFn will be like below:

compareFn(c1: Country, c2: Country): boolean {
    if(c1 && c2) {
       (c1.id || c2.id) ? c1.id === c2.id : c1 === c2;
    }
}

Ref1: https://material.angular.io/components/select/overview#getting-and-setting-the-select-value Ref2: https://angular.io/api/forms/SelectControlValueAccessor#customizing-option-selection