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

Question

我正在尝试构建一个简单的指令，该事件在触发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>

然而，该指令似乎并未按预期运行；如果我在输入之外单击以移出焦点，则其中的值仍然有我键入的空格。

我在指令方面工作不多，所以我不确定是否有一些警告，通常我所拥有的任何输入都是ReactiveForm的一部分，或者仅是FormControl本身，因此我可以订阅valueChanges等等；但我想知道指令是否可以执行我要寻找的操作以及我做错了什么。

Answer 1

内部指令更改

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

Answer 2

[经过更多的工作后，我注意到简单地将this.el.nativeElement.value的值设置为等于其修剪后的值在使用FormControl时并不能很好地工作，因此，即使在Blur上删除了空格，表单控件也会价值仍然保留，可以根据要求发送。

因此，最后，我可以通过在指令的构造函数中注入ReactiveForms并使用NgControl传递调整后的值来使其与NgControl.control.setValue()一起使用，这很棒，因为它触发了可观察到的valueChanges FormControl并在模糊时更新其值。

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

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

}