Set default value using mat-select: Should I use ngModel or value

Question

Goal: Trying to set default value for a dropdown (based on a condition)

Problem: When I remove ngModel it doesn't work. But if I add it back and remove value it also doesnt work. I thought ngModel was supposed to be the feature that affects default value?

What I've tried:

I went back and reviewed information on data binding and template driven and reactive forms
I looked up documentation on ngModel. Value was not quite as clear though
I tried many modifications to mat-select and mat-option

My understanding was that [] did property binding, and allowed the information from Typescript to show up on the webpage (html). [()] allowed for two way binding. and [ngModel] let you take the value from TypeScript and display it. So if you can do 2 way binding with ngModel, what is the purpose of value?

(Context here is an application that has a form, displays a value in the dropdown from database, but allows the user to change the value).

Below is a minimal example of my code:

HTML:

<mat-select [(ngModel)]="myRelationship" placeholder="Relationship to You" formControlName="relationship" required>
    <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
        {{ rel.viewValue }}
    </mat-option>
</mat-select>

Default value doesn't work if you have array of javascript objects with identical values but different viewValues, for example:

relationships = [

{value: Cousin, viewValue: Primo },

{value: Cousin, viewValue: Prima } ]

Conditional logic

if (this.individual.Relationship.startsWith('Cousin')) {
  if (this.individual.Gender == 'M') {
      this.relations[indexCousin].viewValue = "Primo";
      this.relations.push({ value: 'Cousin', viewValue: "Prima" });
  }
}

score 0 · Answer 1 · answered Jan 18 '20 at 01:24

You shouldn't use a combination of ngModel and formControlName on the mat-select. One of them will suffice. To set the default value, you can use the [value] property on the mat-select element. You currently have it just on the mat-option.

<mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
    {{ rel.viewValue }}
</mat-option>

The purpose of value in this template is to set what value the mat-select will have when an option is selected. There are output events on the mat-select that will give you the value of the selected option. e.g. selectionChange.

Each has a value property that can be used to set the value that will be selected if the user chooses this option. The content of the is what will be shown to the user.

If you want to set the default value of the mat-select. You can use [value] but that goes on the mat-select component.

<mat-select [value]="myRelationship" placeholder="Relationship to You" required>    
  <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
    {{ rel.viewValue }}
  </mat-option>
</mat-select>

Notice the formControlName was removed

You could use the formControlName but you have to ensure that the formControl is given a value in your component.

<mat-select placeholder="Relationship to You" formControlName="relationship" required>
       <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
              {{ rel.viewValue }}
       </mat-option>
</mat-select>

The way you set the value of the formControl will depend on how its instantiated in your component.

Thanks for the clarification. It seems that default value does not work if you have 2 objects in an array that have same value but different viewValue. — angleUr, Jan 19 '20 at 22:29

Set default value using mat-select: Should I use ngModel or value

1 Answers1