Angular 如何正确构建修剪输入的指令'；s值多少？

我试图构建一个简单的指令，在触发

blur

事件时修剪输入字段的值

我的想法是要确保删除所有尾随和前导空格，以便保存的数据正确无误。我知道我可以简单地使用

trim（）

在发送请求之前保存值；但是我试图在一个指令中这样做，因为我已经有了一个包含大量输入的大型应用程序，所以构建一个可以应用于输入的指令似乎更容易

到目前为止，我有以下代码：

TrimDirective

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

@Directive({
  selector: '[appTrim]'
})
export class TrimDirective {

  constructor(private el: ElementRef) { }

  @HostListener('blur') onBlur() {
    this.el.nativeElement.value.trim();
  }

}

输入元素

 <div class="wsm-card-header d-flex justify-content-end">
      <input appTrim type="text" class="wsm-input">
 </div>

然而，该指令似乎并没有发挥应有的作用；如果我在输入外部单击以移除焦点，则其中的值仍有我键入的任何空格

---

我没有太多的指令，所以我不确定是否有一些警告，通常我的任何输入都是

反应表单的一部分

o仅仅是

表单控件

，因此我可以订阅

值更改

等等；但我想知道指令是否能满足我的要求，以及我是否做错了什么

@HostListener('blur') onBlur() {
    this.el.nativeElement.value = this.el.nativeElement.value.trim();
  }

---

在做了更多的工作之后，我注意到在使用

FormControl

时，简单地将

this.el.nativeElement.value

的值设置为等于其修剪后的值并不能很好地工作，因此即使在模糊时删除了空白，表单控件的值仍然有空白，并且可以在请求时发送

因此，在指令的构造函数中注入

NgControl

，并使用

NgControl.control.setValue（）

传递修剪后的值，我最终能够使它与

ReactiveForms

一起工作，这很好，因为它触发了

FormControl

的

valueChanges

可观察值，并在模糊上更新其值

指令代码最终如下所示：

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

@Directive({
  selector: '[appTrim]'
})
export class TrimDirective {

  constructor(private el: ElementRef,  @Optional() private ngControl: NgControl) { }

  @HostListener('blur') onBlur() {
    this.ngControl.control.setValue(this.el.nativeElement.value.trim());
  }

}

---

哇，很简单，谢谢你！我会在几分钟内接受答案