如何在Angular中使用带有FormControl的Angular Material滑块？

Question

我希望在一个 FormGroup 中使用 Angular Material 滑块和 FormControl。我有一个预定义值的列表，对于每个值，我都有一个滑块。该列表由对象数组组成，每个对象都有一个 id 和一个 title：

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应该将当前值设置为滑块，并将滑块的新值保存到数组列表的正确标题中。

- A.Service

Answer 1

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

尝试将Slider组件的@Input()value和@Output()change属性映射到您的输入元素上。我认为也可以像这样使用：

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

- walki12

Answer 2

Angular Material 15

最近我升级到了 Angular Material 15（这是一项艰巨的工作），mat-slider 是其中一个变化最大的控件，也是让我最困扰的控件之一：

如果你做错了（就像我一样），你可能会看到这样的错误信息：

ERROR Error: NG01203: No value accessor for form control unspecified name attribute. Find more at https://angular.io/errors/NG01203

使用滑块的新方式 如下：

<mat-slider min="1" max="5" step="0.5" value="1.5">
  <input matSliderThumb>
</mat-slider>

所以你需要做的就是像这样在<input>中添加[formControl]：

<input matSliderThumb [formControl]="form.controls.numberOfDogs" />

（或者如果您更喜欢，formControlName）

- Simon_Weaver

Answer 3

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

- Pa Ri

---

如何在FormControl中使用这个？ - A.Service