如何使角度输入只接受特定数据

Question

我正在处理一个角度项目，我想创建一个只接受3个值0、0.5、1的输入，如果用户输入例如0.4，他将收到一条错误消息，并告诉他只输入3个值中的一个{0/0.5/1}。

Answer 1

您可以将Angular模板驱动的表单与模式验证器一起使用，如下所示：

应用程序组件.ts

export class AppComponent {
model: any = {};
}

app.component.html

<input
type="number"
name="quantity"
[(ngModel)]="model.quantity"
#quantity="ngModel"
pattern="^(0|0.5|1)$"
required
/>
<div *ngIf="quantity.invalid && (quantity?.dirty || quantity?.touched)">
Quantity is invalid! Only allowed values are: 0, 0.5, 1
</div>

尝试Stacklitz：链接