angular2 通过指令限制输入

最近在写一个表单，有些输入框只能输入数字，单又不想每次写表单的时候，都要去验证输入的是不是数字，

那么就想到直接限制只能输入数字，通过指令实现

这里需要注意的是，不只更改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;

    }

  }

}

引用方式：

import {

  NumberInput

} from './directives';

@NgModule({

  declarations: [

    NumberInput

  ],

  imports: [

  ],

  providers: [

  ],

  exports: [

  ]

})

html代码

<input type="number" NumberInput />

巴特西

angular2 通过指令限制输入

最新文章

热门文章