Angular 给 input 添加一个去除两边空格指令

2020-4-29 Jon angular

一般遇到 input 提交内容都会逐个给里面的值去除空格,这是一个重复的劳动力,在 Angular 中可以通过自定义一个指令来解决。
考虑到项目中会有多个组件用到,所以一般会将该指令放到 shared 模块下面,下面简单写下步骤。

  1. 在 shared 模块中创建一个指令

ng g d shared/directives/input-trim

  1. 在 shared 模块 exports 中导出该指令
import { InputTrimDirective } from './directives/input-trim.directive';
@NgModule({
  declarations: [..., InputTrimDirective],
  ...
  exports: [
    ...
    InputTrimDirective
  ],
  ...
})
  1. 编写去除空格指令代码
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appInputTrim]'
})
export class InputTrimDirective {

  constructor(private control: NgControl) { }
  @HostListener('blur', ['$event', '$event.target'])
  @HostListener('keydown.enter', ['$event', '$event.target'])
  keyupFun(evt, target) {
    if (target.value) {
      this.control.control.setValue(this.ltrim(target.value));
    }
  }
  ltrim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, '');
  }
}
  1. 在需要使用该指令的组件所对应的模块中导入 shared 模块
@NgModule({
  ...
  imports: [
    SharedModule,
    ...
  ]
  ...
})
  1. 在组件模板中使用指令
<input type="text" [(ngModel)]="inputValue" placeholder="请输入内容!" appInputTrim>

测试输入内容后回车或者点击按钮都会自动去除空格了。至此,一个简单的 Angular 指令就写完了

标签: angular 指令 input 空格

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap