[Angular]实现Trim指令

最新推荐文章于 2025-01-21 10:32:15 发布

原创最新推荐文章于 2025-01-21 10:32:15 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Angular自定义指令实现的文本框自动去除输入前后空格的功能。通过@HostListener监听blur事件，在失去焦点时调用onBlur方法，对输入值进行trim操作，保持数据的整洁性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { Directive, HostListener, ElementRef } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[trim]'
})
export class TrimDirective {
  constructor(private elementRef: ElementRef, private control?: NgControl) { }

  @HostListener('blur', ['$event.target'])
  onBlur(event) {
    console.log("==========trim操作==========");
    if (event.value) {
      if (this.control) {
        this.control.control.patchValue(this.control.value.trim());
        this.control.control.updateValueAndValidity();
      }
      else {
        this.elementRef.nativeElement.value = event.value.trim();
      }
    }
  }
}