[Fixed] How should the mat-slider be used inside a form configured with formGroup? Angular Material


I have created a form that has inputs of text type and a mat-slider to get a numeric value

// TS
this.consumptionForm = this.formBuilder.group({
      dailyConsumption: ['', Validators.required],
      cost: [20, Validators.required],

<form #form="ngForm" [formGroup]="consumptionForm" novalidate>
     <mat-slider formControlName="cost" [min]="10" [max]="1000" >

           <mat-form-field [floatLabel]="true">
              <mat-label>Daily Consumption</mat-label>
               <input matInput formControlName="dailyConsumption"/>

I want the mat-slider to work in conjunction with the rest of the form, and if it is not possible to know which approach is used to use it.

I see that the formControlName is not working


Here is a working implementation of your issue at Stackblitz.

I’ve added an extra get button to log the form value in the console.

Leave a Reply

(*) Required, Your email will not be published