CODEWITHSUNDEEP
angulartypescriptangular-materialangular-reactive-formsangular-forms
Roster
Roster

Reputation: 1964

<mat-select> selected value setting but it is not showing

I have a parent component like this .

         <form [formGroup]="validateFormGroup">
          <div>
            <mat-form-field>
              <input matInput placeholder="Name" maxlength="150" formControlName="name" required>
            </mat-form-field>
          </div>
          </form>
          <div class="">
            <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones>
          </div>

and in the app-calendar-time-zones component this is my HTML code I have

    <div class="calendar-container">
            <mat-form-field>
    <mat-label>Select time zone</mat-label>
    <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control'  >

      <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id"
                  (click)="timeZoneSelected(timezone)">
        {{timezone.offset + ' ' + timezone.displayName}}
      </mat-option>

    </mat-select>
  </mat-form-field>
      
    </div>

And in child component Ts file I am setting the value like this but its mat select element is not setting to the selected value.

    this.selectedTimeZone = this.filteredTimeZones[0];

    //  selectedTimeZone  i am getting here is this ==  {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""}

Getting the following empty dropdown is displaying. But if i click on dropdown icon i am able to see all the options. enter image description here

and in the browser if i inspect mat-select element. ngModel value is setting .

enter image description here

Upvotes: 0

Views: 2168

Answers (2)

Awara Amini
Awara Amini

Reputation: 582

I am bringing back data from data base and showing it via ngModel using select or mat-select:

    <mat-form-field>
         <mat-label for="">Doctor Name</mat-label>
         <mat-select [(ngModel)]="patientInfo.doctorName">
           <mat-option value="" selected></mat-option>
           @for (doctor of doctorsList(); track doctor) {
           <mat-option [value]="doctor.name">{{ doctor.name }}</mat-option>
          }
         </mat-select>
    </mat-form-field>

Upvotes: 1

Francesco Colamonici
Francesco Colamonici

Reputation: 1297

To make the selection automatic, the value passed via ngModel must match the value of an Option.

So, I guess selectedTimeZone.displayName doesn't match any of the timezone.ids bound to your Options.

Upvotes: 1

Related Questions