使用 Angular Material 创建数字微调器？

Question

Angular Material有数字微调器吗？我试过这个 :


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

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

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>

使用 Angular Material 创建数字微调器？

Creating a Number Spinner with Angular Material?

html

angular-material

angular