使用 Angular 材质创建数字微调器？

Question

Angular Material 有数字微调器吗？我试过这个demo from this question：

<mat-form-field>
    <input
      type="number"
      class="form-control"
      matInput
      name="value"
      placeholder="Slab"
      formControlName="value">
  </mat-form-field>

但它不渲染。我打算创建一个 Stackblitz，但它不适用于 Angular 12。

想法？

Answer 1

它只适用于 .css。您将两个按钮 mat-icon-button 包含在包装器 div matSuffix 中

一个例子（免责声明，我真的不太擅长css，很确定有更好的方法来获得同样的效果

.wrapper-indicator{
  position:relative;
  height:1.5rem;
  width:1.5rem;
  overflow:none;
}
.wrapper-indicator .up,.wrapper-indicator .down{
  position:absolute;
  right: 0;
  font-size:.5em;
  height: 1.25rem!important;
  width: 1.25rem!important;
}
.wrapper-indicator .up{
  top:-.25rem;
}
.wrapper-indicator .down{
  top:1rem;
}

并使用

  <mat-form-field appearance="fill" floatLabel="always">
    <mat-label>Amount</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0">
    <div matSuffix class="wrapper-indicator">
      <button class="up" mat-icon-button >
        <mat-icon>expand_less</mat-icon>
      </button>
      <button class="down" mat-icon-button >
        <mat-icon>expand_more</mat-icon>
      </button>
    </div>
  </mat-form-field>

更新 mat-input 直接创建一个微调器是你使用 type="number"。奇怪，当我输入时不显示“微调器”。看看github中的代码，“类型”是@Input，所以想象一下在旧版本的Angular中几乎需要写type="number" after matInput

Answer 2

现在可以了。我不确定我到底改变了什么......：

<mat-form-field>
    <input
      type="number"
      class="form-control"
      matInput
      min="1" 
      max="5"
      name="value"
      placeholder="Select a Number Between 1 and 5"
      formControlName="value">
  </mat-form-field>