如何在使用 formGroup 配置的表单中使用 mat-slider？ Angular Material

Question

我创建了一个表单，其中包含文本类型的输入和用于获取数值的垫滑块

// 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>

我希望 mat-slider 与表单的其余部分一起工作，如果无法知道使用哪种方法，请使用它。

我看到 formControlName 不起作用

Answer 1

这是您在 Stackblitz.

问题的有效实施

我添加了一个额外的获取按钮来在控制台中记录表单值。

如何在使用 formGroup 配置的表单中使用 mat-slider？ Angular Material

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

angular-material

angular

mat-slider