最近在写一个表单,有些输入框只能输入数字,单又不想每次写表单的时候,都要去验证输入的是不是数字,
那么就想到直接限制只能输入数字,通过指令实现
这里需要注意的是,不只更改DOM的值,如果input为数据绑定的值,需要更新绑定值,
所以需要引入NgModel,通过viewToModelUpdate,来更新绑定值
import { Directive } from ‘@angular/core‘; import { NgModel } from ‘@angular/forms‘; // 自定义指令 @Directive({ selector: ‘input[number]‘, host: { ‘(keypress)‘: ‘onkeypress($event)‘, ‘(keyup)‘: ‘onkeyup($event)‘ }, inputs: [‘maxValue‘], }) export class NumberInput { maxValue: number; constructor(public control: NgModel) { } onkeyup(event) { let input = event.target; if (input.value == "") { input.value = 0; this.control.viewToModelUpdate(0); } let newValue = parseInt(input.value); if (newValue > this.maxValue) { input.value = this.maxValue; this.control.viewToModelUpdate(this.maxValue); } else { input.value = newValue; this.control.viewToModelUpdate(newValue); } } onkeypress(event) { // 判断是否为数字 let inputStr = String.fromCharCode(event.keyCode); if (!parseInt(inputStr)) { return false; } } }
时间: 2024-10-11 09:19:37