使用angular的自定义指令解决输入框不可以输入空格的问题
1.在开发中有很多的数据框,输入空格是没有意义的,我们一般会不允许使用者输入空格
对于一般的使用输入框的地方一般为表单和搜索,这里有两种解决方案,
-
1.自定义表单验证和输入框验证;
-
2.使用自定义指令的方式来解决问题;
自定义表单验证和输入框验证已经使用过了,这次使用Directive来解决问题 -
1.新建指令文件(input-not-null.directive.ts)
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[appInputNotNull]'
})
export class InputNotNullDirective {
constructor(private $control: NgControl) {
}
@HostBinding('style.borderColor') borderColor: string;
// 监听元素的keydown事件
@HostListener('keydown', ['$event'])
keydown(event) {
if (event.key.trim() === '') {
// 取消事件的默认动作
event.preventDefault();
// this.borderColor = 'red';
} else {
this.borderColor = '#d6d6d6'; // 不为空时输入框的颜色
}
}
// 监听元素的keyup事件
@HostListener('keyup', ['$event', '$event.target'])
keyup(target) {
if (target.value) {
this.$control.control.setValue(this.trim(target.value));
}
}
// 正则当输入空格时,将输入的值清空
trim(inputStr) {
return inputStr.replace(/(^\s*)/g, '');
}
}
- 2 在使用的module中引入
declarations: [InputNotNullDirective] // 在模块下的所有需要去空格的组件都可以应用了
- 3.组件中使用
<textarea
formControlName="ReMark"
placeholder="请输入备注信息" appInputNotNull>
</textarea>
-
4 测试
这样在输入框中就无法输入空格了! -
5总结
@Directive ------ 自定义指令 @HostListener ------ 监听宿主元素的事件(使用该指令的元素的事件) NgControl ------控制器 @HostBinding ------ 监听宿主元素的属性,可以为宿主元素实时添加属性,如:类,样式,属性等(可以跟@HostListener一起用,比如输入空格的时候,输入框会变红等等)