Angular使用Directive自定义指令-------不可输入空格( @HostBinding&&@HostListener)

使用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一起用,比如输入空格的时候,输入框会变红等等)