如何在 Angular 中使用带有 FormControl 的 Angular 材质滑块？答案

【问题标题】：How to use an Angular Material Slider with FormControl in Angular?如何在 Angular 中使用带有 FormControl 的 Angular 材质滑块？
【发布时间】：2019-11-29 02:26:05
【问题描述】：

我想在 FormGroup 中使用带有 FormControl 的 Angular Material Slider。我有一个包含预定义值的列表，并且每个列表都有一个滑块。该列表由一个包含对象的数组组成，每个对象都有一个 id 和一个标题：

const array = [{id: 'anyId', title: 'theTitle'}, ...]

我需要处理滑块的标题和滑块的值，因为我有很多滑块。

所以我有这样的对象：

{id: 'anyId', value: 'sliderValue'}

<mat-list>
              <mat-list-item *ngFor="let item of array">{{item.title}}
                <mat-slider step="1" min="0" max="4" thumbLabel></mat-slider>
              </mat-list-item>
            </mat-list>

如何使用 formControl 进行管理？ FormControl 应该将当前值设置为滑块，并将滑块的新值保存到数组列表的正确标题中。

【问题讨论】：

标签： html angular typescript angular-material slider

【解决方案1】：

https://stackblitz.com/edit/angular-4uwzsd

<mat-list>
    <mat-list-item *ngFor="let item of array">{{item.title}}
        <mat-slider [thumbLabel]="true" [(ngModel)]="item.value"></mat-slider>
    </mat-list-item>
</mat-list>

item.value 应该是一个数字！这里可以找到官方的例子：https://material.angular.io/components/slider/examples

【讨论】：

如何将它与 FormControl 一起使用？

【解决方案2】：

<mat-form-field>
            <mat-label>Modification Value</mat-label>
            <input #modValue type="number" [formControl]="modificationValue" matInput required>
</mat-form-field>
<mat-slider [value]="modValue.value" (change)="modValue.value = $event.value"></mat-slider>

尝试将 @Input()value 和 @Output()change 从滑块映射到您的输入元素。我认为也可以这样使用：

<mat-slider [value]="modificationValue.value" (change)="modificationValue.setValue($event.value)"></mat-slider>

【讨论】：