如何正确构建修剪输入值的指令？

Question

我正在尝试构建一个简单的指令，在触发 blur 事件时修剪输入字段的值。

我的想法是要确保删除任何尾部和前导的白色 space，以便保存的数据是正确的。我知道在根据请求发送值之前保存值时，我可以简单地使用 trim() ；但我正在尝试在一个指令中执行此操作，因为我已经有一个包含大量输入的大型应用程序，因此构建一个我可以应用于输入的指令似乎更容易。

到目前为止我有这个代码：

修剪指令

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>

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

我没有太多使用指令，所以我不确定是否有一些注意事项，通常我的任何输入都是 ReactiveForm 的一部分 o 只是 FormControl 本身所以我可以订阅valueChanges之类的；但我想知道一个指令是否可以做我正在寻找的东西，以及我是否做错了什么。

Answer 1

内部指令的变化

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

Answer 2

再工作一点后，我注意到简单地将 this.el.nativeElement.value 的值设置为等于其修剪后的值在使用 FormControl 时效果不佳，所以即使空格是在 Blur 上删除，表单控件的值仍然有它们并且可以根据请求发送。

所以最后我能够通过在我的指令的构造函数中注入 NgControl 并使用 NgControl.control.setValue() 传递修剪后的值来使其与 ReactiveForms 一起工作，这很棒，因为它触发 FormControl 的 valueChanges observable 并在模糊时更新它的值。

指令代码最终看起来像这样：

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());
  }

}

如何正确构建修剪输入值的指令？

How to correctly build a directive that trims an input's value?

typescript

angular-directive

form-control

angular