angular素材中的范围输入字段

Question

如何使用 angular 材料表单字段实现范围输入字段？ 它看起来应该有点类似于范围日期选择器，但我想不出实现它的方法。

我想实现例如数字输入，用户可以在其中输入范围。 这应该看起来类似于此示例，其中包含来自 angular 材料的范围日期选择器，但用于标准数字输入字段。

Answer 1

我遇到了类似的问题，所以我遵循了@dt170 对这个问题的评论。 这对我有用：

<mat-form-field>
  <mat-label>From</mat-label>
  <input matInput #from type="number" formControlName="from" [max]="to.value">
</mat-form-field>

<mat-form-field>
  <mat-label>To</mat-label>
  <input matInput #to type="number" formControlName="to" [min]="from.value">
</mat-form-field>

这是一个非常简单的解决方案（可能不完美但有效）。 关键部分是输入字段的[max]和[min] - 它们被设置为彼此的值，因此范围是有效的（即从 < 到）。

*当范围无效时，两个字段都无效。