CODEWITHSUNDEEP
angularangular-material
ResolveError
ResolveError

Reputation: 155

How to select options in multiple mat-select at initial loading by default?

I want to show by default checkbox selected on page load.
I tried with formcontrol but still getting issue.

TypeScript:

public SelectbyDefault()
{
  this.servicedropdownsFA = [{id: "httpStatus/380/", value: 1},{id: "httpStatus/381", value: 2}]
}

HTML:

<mat-form-field>
    <mat-select placeholder="Select Error Category"  
    [formControl]="servicedropdownsControl" multiple>                 
        <mat-option *ngFor="let service of servicedropdownsFA" [value]="service"
        (click)="selectedFAdropdown($event,service,servicedropdownsControl)">
            {{service.id}}
        </mat-option>
    </mat-select>
</mat-form-field>

Upvotes: 1

Views: 2478

Answers (1)

M A Salman
M A Salman

Reputation: 3820

Set it while initializing form group

For mat select - Stackblitz

 this.poemForm = this.fb.group({
      servicedropdownsControl: [this.servicedropdownsFA[0], [Validators.required]],
    });

For normal select - Stackblitz

this.form.controls['servicedropdownsControl'].setValue(this.servicedropdownsFA[0], {onlySelf: true});

For multiple matselect - Stackblitz

let defaultValues=this.servicedropdownsFA.slice(0,2);//or get your default set of objects
this.form = this.fb.group({
  servicedropdownsControl: [defaultValues, [Validators.required]],
});

Upvotes: 2

Related Questions