[Angular Directive] 输入框禁止为空字符串与自动去除空格指令

一、前言

input 输入框自带了

1
required
属性,用以表单验证,但是只要有字符,即使全为空格也能通过
1
required
验证,这无法满足一些应用场景,所以需要自定义一些指令,用来满足验证全为空格的输入。

在使用自定义的 Directive 修改 input 输入框值或属性时,需要注意:

  1. 请尽量使用 Angular 提供的类或方法来修改输入框的值, 以免
    1
    
    ngModel
    
    无法同步;
  2. 同上,使用
    1
    
    FormControl
    
    而非
    1
    
    ElementRef
    
    来更新输入框的值;
  3. 构造函数中使用
    1
    
    NgControl
    
    获取输入框的引用,而非直接使用
    1
    
    FormControl
    

二、实例

  • 实例使用版本:angular 5.1.0

1. 验证空字符串

通过添加自定义的

1
Validator
,实现验证空字符串,不合法的输入返回
1
{'required': true}
对象,等同于原生的在 input 输入框添加 required 属性后的不合法输入的返回结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
import { FormGroup, FormControl, NgControl } from '@angular/forms';

@Directive({
  selector: '[input-required]'
})
export class InputRequiredDirective {

    constructor(private elementRef: ElementRef, private control : NgControl) {
        if (control && control.control) {
            control.control.setValidators((c: FormControl) => {
                let v = c.value;
                if (!v || v.trim() == '') {
                    return {'required': true};
                } 
                return null;
            });
        }
    }
    
}

使用方式

1
<input type="text" [(ngModel)]="name" name="name" input-required />

2. 替换左边空格

替换左边空格,其实也意味可以在字符串右侧输入空格,却无法全输入空格,但是这种方法有一个缺陷,即如果一直按住空格,然后点击表单的提交,也能绕过输入框的

1
required
验证,所以最好是配合上面的
1
input-required
指令一起使用。

同时请注意,这里使用

1
FormControl.setValue(...)
方法,可以触发
1
ngModel
的更新,如果使用 js 或 ElementRef 提供的方式,将会出现
1
ngModel
无法同步更新的后果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
import { FormGroup, FormControl, NgControl } from '@angular/forms';

@Directive({
  selector: '[input-ltrim]'
})
export class InputLeftTrimDirective {

    constructor(private elementRef: ElementRef, private control : NgControl) {

    }

    @HostListener("keyup", ["$event", "$event.target"]) 
    keyupFun(evt, target) {
        if (target.value) {
            this.control.control.setValue(this.ltrim(target.value));
        } 
    }

    ltrim(str) {
        return str.replace(/(^\s*)/g,"");
    }

}

使用方式

1
<input type="text" [(ngModel)]="name" name="name" input-ltrim />

3. 禁止输入空格

禁止输入空格,即当用户按下空格键时便阻止输入,但是如果只是这样,那么用户仍然可能使用粘贴的方式输入空格,所以这里同时在

1
keyup
事件中将所有空格替换了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { FormGroup, FormControl, NgControl } from '@angular/forms';

@Directive({
  selector: '[input-noSpace]'
})
export class InputNoSpaceDirective {

    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
<input type="text" [(ngModel)]="name" name="name" input-noSpace />

二、配置

上面省略了配置,这里一并贴出。

1. 在

1
directives
目录下的
1
index.ts
中输入如下信息:

1
2
3
4
5
6
7
8
9
import { InputLeftTrimDirective } from './input-trim/input-ltrim.directive'
import { InputNoSpaceDirective } from './input-trim/input-noSpace.directive'
import { InputRequiredDirective } from './input-required/input-required.directive'

export const DIRECTIVES : Array<any> =[
    InputLeftTrimDirective,
    InputNoSpaceDirective,
    InputRequiredDirective,
]

2. 在

1
@NgModel
中配置如下(不相关部分被省略):

1
2
3
4
5
6
7
8
9
import { DIRECTIVES } from './directives';

@NgModule({
    declarations: [
        ..._DIRECTIVES,
    ],
}

三、参考链接

四、最后

在实际的开发中,因为刚开始对于 Directive 并不熟,所以对于在构造函数中传入

1
NgControl
并不了解,导致踩了很多坑,但是通过 debug,意外的发现了可以自定义设置效验器,以及其它的一些问题,也算是一种额外的收获吧,以上。

一次 JVM 占用 CPU 资源过高的问题排查

* TOC{:toc}早晨刚到公司就收到服务器 CPU 持续飙高在 400% 左右的邮件。因为是新的服务器,上面只在一个 docker 中跑了一个 Java 应用,所以大致可以确定就是它的问题,接下来就是如何通过工具定位具体代码的问题了。大致的处理思路如下:1. 定位系统中...… Continue reading