Angular 2/4 : 如何使用指令检查输入值的长度？

Question

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

我不知道为什么如果条件不起作用，在 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

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

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

}

Answer 2

我创建了一个类似的例子。

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

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

   constructor(private el: ElementRef) { 
     var elem = el.nativeElement.value;
    console.log(elem + "==> length = " + elem.length);
   }


}

在 html 部分

<input class="mask-text" value="hello" inputfocus type="text"/>

演示 http://plnkr.co/edit/JX6P1vnqUJEzL94BOFuO?p=preview

Answer 3

您可以在 DoCheck 中跟踪输入长度变化：

指令

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

export class InputFocusedDirective implements DoCheck
 {
   public valLength;
   @Input() inputfocus;
   constructor(public el: ElementRef, public renderer: Renderer) {}


   ngDoCheck(){
         let valLength = this.el.nativeElement.value.length;
         console.log("valLength "+ valLength );

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

HTML

<div>
   <input [inputfocus]="fname" name="name" [(ngModel)]="fname" type="text">
</div>

CSS:

input{
  background-color:red;
}

.focused input{
  background-color:green;
}

stackblitz demo

Angular 2/4 : 如何使用指令检查输入值的长度？

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

typescript

angularjs-directive

angular2-directives

angular