Angular 2/4:如何使用指令检查输入值的长度? [英] Angular 2/4 : How to check length of input's value using directive?

问题描述

我创建了一个可以验证输入的自定义属性指令，它有没有价值.请参考以下代码.

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

我也尝试过其他 angular 的应用生命周期事件.

谢谢！

import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core';@Directive({ 选择器: '[inputfocus]' })导出类 InputFocusedDirective 实现 AfterContentInit {公共值长度；构造函数(公共 el:ElementRef，公共渲染器:渲染器){}ngAfterContentInit() {var valLength = this.el.nativeElement.value.length;consol.log("valLength"+ valLength );如果 (valLength > 0) {this.renderer.setElementClass(this.el.nativeElement.parentElement, 'focused', true);}}}

解决方案

您可以在 DoCheck:

指令

指令({选择器:'[inputfocus]'})导出类 InputFocusedDirective 实现 DoCheck{公共值长度；@Input() 输入焦点；构造函数(公共 el:ElementRef，公共渲染器:渲染器){}ngDoCheck(){让 valLength = this.el.nativeElement.value.length;console.log("valLength "+ valLength );如果 (valLength > 0) {this.renderer.setElementClass(this.el.nativeElement.parentElement, 'focused', true);}别的{this.renderer.setElementClass(this.el.nativeElement.parentElement, 'focused', false);}}}

HTML

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

CSS:

输入{背景颜色:红色；}.重点输入{背景颜色:绿色；}

stackblitz 演示

I've created one custom attribute directive that can validate input, It has value or not. Please refer below code.

I don't know why if condition is not working, in console.log it is showing 0 only. is there anything wrong in my code?

I tried with other angular's app lifecycle event too.

Thanks!

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


    }
}

解决方案

You can track the input length changes in DoCheck:

Directive

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:如何使用指令检查输入值的长度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！