Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格_angular 如何限制input输入

创建一个ts文件，并在module.ts中定义

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { FormGroup, FormControl, NgControl } from '@angular/forms';
@Directive({selector: '[input-noSpace]'})
export class NoSpace {
    constructor(private elementRef: ElementRef, private control : NgControl) {

    }
    @HostListener("keydown", ["$event"])
    keydownFun(evt) {        if (evt.key.trim() == '') {
        evt.preventDefault();
        }
    }

    @HostListener("keyup", ["$event", "$event.target"])
    keyupFun(evt, target) {        if (target.value) {
        this.control.control.setValue(target.value.replace(/(\s*)/g, ""));
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

然后直接在input框中加入属性input-noSpace就可以使用了

(注意input框要绑定ngmodel)

<input type="test" name="managerNo" id="managerNo" [(ngModel)]="info.managerNo" required
       #idClass="ngModel" (keyup)="doCode()" maxlength="50" input-noSpace/></td>
1
2

参考的博客找不到了，过了好久才想起来总结。