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

【问题标题】：How to correctly build a directive that trims an input's value?如何正确构建修剪输入值的指令？
【发布时间】：2020-06-09 16:14:32
【问题描述】：

我正在尝试构建一个简单的指令，用于在触发 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 本身的一部分，所以我可以订阅@987654327 @等；但我想知道一个指令是否可以做我正在寻找的东西，以及我是否做错了什么。

【问题讨论】：

标签： angular typescript angular-directive form-control

【解决方案1】：

指令内部的变化

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

【讨论】：

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

【解决方案2】：

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

所以最后我能够通过在我的指令的构造函数中注入 NgControl 并使用 NgControl.control.setValue() 传递修剪后的值来使其与 ReactiveForms 一起工作，这很棒，因为它触发了 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());
  }

}

【讨论】：