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

}
时间: 2024-10-11 09:19:37

angular2 通过指令限制输入的相关文章

Angular2组件开发—表单输入(四)

NgFormControl - 绑定已有控件对象 与NgControlName指令不同,NgFormControl将已有的控件/Control对象绑定到DOM元素 上.当需要对输入的值进行初始化时,可以使用NgFormControl指令. 下面的代码中,使用NgFormControl指令将DOM元素绑定到组件EzComp的成员 变量movie上,我们需要在构造函数中先创建这个Control对象: 1 @View({ 2 //将输入元素绑定到已经创建的控件对象上 3 template : `<in

Angular2 入门详解

AngularJS 2 快速入门 npm是什么?   npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js之后配置npm: 配置npm的全局模块的存放路径以及cache的路径: 查看全局模块路径:npm config get prefix 查看全局cache路径:npm config get cache 在NodeJs下建立"node_global"及"node_cache"

Angular17 Angular自定义指令

1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 具体的知识点请参见<Angular2揭秘> 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.

CSU 1112: 机器人的指令【模拟题】

1112: 机器人的指令 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 1858  Solved: 682 [Submit][Status][Web Board] Description 数轴原点有一个机器人.该机器人将执行一系列指令,你的任务是预测所有指令执行完毕之后它的位置. ·LEFT:往左移动一个单位 ·RIGHT: 往右移动一个单位 ·SAME AS i: 和第i 条执行相同的动作.输入保证i 是一个正整数,且不超过之前执行指令数 In

汇编--指令系统 数据传送类指令

(1) 数据传送类指令 通用数据传送指令:MOV .PUSH.POP.XCHG 交换指令 累加器专用传送指令: IN.OUT .XLAT 换码指令 地址传送指令:LEA.LDS.LES 标志寄存器传送指令:LAHF.SAHF.PUSHF.POPF 类型转换指令:CBW.CWD.CDQ.BSWAP MOV指令 对于存储器单元与立即数同时作为操作数的情况,必须显式指明   ;byte ptr 说明是字节操作   ;word ptr 说明是字操作 mov [bx],[si+2]  错误 不允许立即数传

Angular 2 属性指令 vs 结构指令

Angular 2 的指令有以下三种: 组件(Component directive):用于构建UI组件,继承于 Directive 类 属性指令(Attribute directive):  用于改变组件的外观或行为 结构指令(Structural directive):  用于动态添加或删除DOM元素来改变DOM布局 组件 import { Component } from '@angular/core'; @Component({       selector: 'my-app', // 

Linux指令学习

Bash指令基本命令文件操作命令文本命令系统常用命令软件源(软件仓库)vi指令Ubuntu目录可执行文件文件类型(一般是使用ls命令列出来文件的第一个字符)Ubuntu权限三种身份Ubuntu软件包操作Ubuntu安装ubuntu桌面程序(对于只有服务器端的linux,即无图形化界面.仅有命令行的linux)虚拟机基本知识网络连接方式 Bash指令 基本命令 ls 显示当前目录下文件 ls -al 更详细的显示当前目录下的文件(包含隐藏文件) pwd 显示当前目录 cd 进入对应目录 cd ..

CSU OJ 1112机器人的指令 (湖南省12年省赛题)

 Welcome to CSU Online Judge! 1112: 机器人的指令 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 274  Solved: 97 [Submit][Status][Web Board] Description 数轴原点有一个机器人.该机器人将执行一系列指令,你的任务是预测所有指令执行完毕之后它的位置. ·LEFT:往左移动一个单位 ·RIGHT: 往右移动一个单位 ·SAME AS i: 和第i 条执行相同的

Windows64位安装GPU版TensorFlow 0.12,Power Shell下输入:安装Tensorflow的全教程

推荐使用powershell,只需要在cmd指令窗口输入powershell即可 下载64位Python3.5(一定要3.5!!)可以通过Python 3.5 from python.org 或 Python 3.5 from Anaconda 下载并安装Python3.5.2(注意选择正确的操作系统). 具体教程可以查看Python3.5.2百度经验安装,里面有个细节,自动设置环境变量,不能忘 安装VS2015,如果是2013的后面要加个插件,这是后话 为了使用国内镜像加速pip安装,需要如下