Как следует использовать ползунок mat внутри формы, настроенной с помощью formGroup? Угловой материал

Question

Я создал форму, которая имеет вводы текстового типа и ползунок mat для получения числового значения

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

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


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

Я хочу, чтобы коврик-слайдер работал вместе с остальной частью формы, и если невозможно узнать, какой подход используется для его использования.

Я вижу, что formControlName не работает

Answer 1

Вот рабочая реализация вашей проблемы в Stackblitz .

Я добавил дополнительную кнопку получения, чтобы регистрировать значение формы в консоли.