angular ng2 自定义指令限制input的输入长度、允许输入的字符限制

最新推荐文章于 2024-02-19 20:30:00 发布

cen备忘录

最新推荐文章于 2024-02-19 20:30:00 发布

阅读量4.7k

点赞数

分类专栏： angular js 文章标签： angular2 ng2

本文链接：https://blog.csdn.net/cen_cs/article/details/84403550

版权

本文介绍了如何在Angular NG2中创建一个自定义指令，用于限制input输入的长度和允许的字符类型。示例展示了如何显示当前输入长度与最大限制，并提供了两种使用情况的代码示例。若要实现特定字符限制，可以在事件处理方法onkeypress或onInput中进行处理。

摘要由CSDN通过智能技术生成

效果如下图：显示当前输入长度 / 最大限制

这个例子是限制长度，如果需要限制输入的字符类型（如只能输入数字、英文。。。）可以在这onkeypress / onInput两个方法作相应处理。

直接上代码

import { Directive, ElementRef } from '@angular/core';
import { NgControl, NgModel } from '@angular/forms';

@Directive({
  selector: 'input[inputLen]',
  // providers:[NgModel] // 如果报 no providers for NgModel, 加这一行
  host: {
    '(keypress)': 'onkeypress($event)',
    '(input)': 'onInput($event)',
  },
  inputs: ['inputLen'],
})
export class InputLenDirective {
  maxLength: number;
  inputLen: number;

  constructor(
    private el: ElementRef, 
    public ngControl: NgControl,
    public ngModel: NgModel
    ) {}
  ngOnInit() {