How to select default value for a mat dropdown using reactive form approach

Question

I am using a mat-dropdown in a reactive form . I want to choose a default option from the dropdown .

In the template driven approach i used [{ngModel}] = "selectedValue" to set the default value . But in reactive forms while using formControlName , ngModel is not supported .

How can i set any option to default selected in reactive forms ? Can anyone help .

 <mat-label><b>ABC Group: <mark class="red">*</mark></b></mat-label>
                    <mat-form-field appearance="outline">
                        <mat-select formControlName="apcGroup" (selectionChange)="onSelectionChanged($event)" placeholder="Select One">
                            <mat-option *ngFor="let abc of Group"  [value]="abc.groupDesc">{{abc.groupDesc}}</mat-option> 
                        </mat-select>
                    </mat-form-field>

Srinath Kamath Srinath Kamath · Accepted Answer · 2021-02-23T05:15:56

You can make use of the setValue() function on the reactive forms.

Add this in your component.ts

ngOninit(){
  this.yourForm.controls.Group.setValue('Your Value');
}

You can also make use of patchValue() function instead of setValue() depending on your usecase.

PS - Removed sensitive info

How to select default value for a mat dropdown using reactive form approach

1 Answers