Angular 2/4 : How to check length of input's value using directive?

Question

我已经创建了一个可以验证输入的自定义属性指令，无论它是否有值(value)。请引用下面的代码。

我不知道为什么如果条件不起作用，在 console.log 中它只显示 0。我的代码有什么问题吗？

我也尝试过其他 Angular 的应用程序生命周期事件。

谢谢!

import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core';

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

export class InputFocusedDirective implements AfterContentInit {
    public valLength;

    constructor(public el: ElementRef, public renderer: Renderer) {}

    ngAfterContentInit() {

        var valLength = this.el.nativeElement.value.length;
    consol.log("valLength "+ valLength );

        if (valLength > 0) {
           this.renderer.setElementClass(this.el.nativeElement.parentElement, 'focused', true);
        }


    }
}

Answer 1

如果您要做的只是在输入中包含一些文本时将类应用于包含元素，则您不需要指令。

<div id="i-contain-the-input" [ngClass]="{'focused': myInputValue && myInputValue.length > 0}">
  <input [(ngModel)]="myInputValue" type="text">
</div>
<!-- myInputValue needs to be declared in your component -->

但如果您绝对必须为此制定指令，请执行以下操作:

@Directive({
  selector: '[inputfocus]',
})
export class InputFocusedDirective {

  constructor(private el: ElementRef, private render: Renderer) {
  }

  @HostListener('change') onChange() {
    if (this.el.nativeElement.value.length > 0) {
      this.renderer.setElementClass(this.el.nativeElement.parentElement, 'focused', true);
    }
  }

}