Angular 4 指令操作输入文本

Question

我已经为 trim 我的输入文本创建了一个简单的指令（我计划稍后扩展它的功能 - 所以请不要推荐简单的 onkeyup 函数），我想让一个指令起作用。

我这样使用我的指令：

    <input type="text" class="form-control" inputTextFilter [(ngModel)]="data.name">

我的指令如下：

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

@Directive({
  selector: '[inputTextFilter]'
})

export class InputTextFilterDirective {
  value: string;

  constructor() {
    console.log('contrusted InputTextFilterDirective');
    this.value = '';
  }

  @HostListener('change')
  onChange($event) {
    console.log('in change InputTextFilterDirective');
    this.value = $event.target.value.trim();
    console.log(this.value);
  }
}

我看到构造函数消息记录到 window，但更改消息从未出现，我的值也从未改变（空格不是从末尾开始的 trimmed）。我怀疑 hostListeners 和 hostProperties 不正确，因为我见过很多相互矛盾的例子......但无法确认正确的方法。

这有什么问题？

Answer 1

将指令更改为

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

@Directive({
  selector: '[inputTextFilter]'
})

export class InputTextFilterDirective {
  @Input() ngModel: string;

  constructor(private el: ElementRef) {
    console.log('constructed InputTextFilterDirective');
    (el.nativeElement as HTMLInputElement).value = '';
  }

  @HostListener('change')
  onChange() {
    console.log('in change InputTextFilterDirective');
    (this.el.nativeElement as HTMLInputElement).value.trim();
    console.log(this.ngModel);
  }
}

试试看是否有效。如果没有，请尝试将事件从“change”更改为“input”或“ngModelChange”

Answer 2

你可以试试我创建的这个指令： https://www.npmjs.com/package/ngx-trim-directive

它基于一个非常简单的事实，即 Angular 监听输入事件以实现视图到模型的绑定。

Answer 3

给你：

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

@Directive({
    selector: '[trim-text]'
})
export class TrimTextDirective {
    constructor(
        private el: ElementRef,
    ) {}

    @HostListener('blur')
    // @HostListener('input')
    @HostListener('change')
    applyTrim() {
        let ele = this.el.nativeElement as HTMLInputElement;
        if (typeof ele.value === 'string') {
            ele.value = ele.value.trim();
        }
    }
}

如果您取消注释“@HostListener('input')”，您将无法写入空格（以防您想要 trim 两边并允许中间有空格）

Angular 4 指令操作输入文本

Angular 4 directive to manipulate input text

angular2-directives

angular