使用角度材质创建数字微调器

Question

角度材质有数字微调器吗？我尝试了这个问题的演示：

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

但它不会渲染。我本来打算创建一个Stacklitz，但它不适用于Angular 12。

想法？

Answer 1

它只能与.css一起使用。您可以将两个按钮的mat图标按钮封装在包装器div matSuffix 中

举个例子(disclammer，我真的不太擅长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垫子输入直接创建一个微调器是您使用type="数字"；。奇怪的是，当我进行输入时；旋转器"；。看看github中的代码；类型"；是@Input，所以想象一下，几乎在旧版本的Angular 中，有必要在matInput之后写入type="number"

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>