Question

我创建了一个简单的指令来修剪我的输入文本（我计划稍后扩展它的功能 - 所以请不要推荐一个简单的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);
  }
}

我看到构造函数消息记录到窗口，但是on change的消息永远不会出现，我的值永远不会改变（空格不会从末尾修剪）。我怀疑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');
    (el.nativeElement as HTMLInputElement).value.trim();
    console.log(this.ngModel);
  }
}

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

Answer 2

您在这里：

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'）”，将无法写空格（如果要修剪边并允许在其之间留空格）

Answer 3

您可以尝试由我创建的以下指令： https://www.npmjs.com/package/ngx-trim-directive

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

用于处理输入文本的Angular 4指令

3 个答案: