如何在 Angular 中将 Angular Material Slider 与 FormControl 一起使用？

Question

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

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>

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

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

Answer 2

角材料 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>

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

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

（或者formControlName如果你愿意的话）