Angular 2/4:如何使用指令检查输入值的长度? [英] Angular 2/4 : How to check length of input's value using directive?
本文介绍了Angular 2/4:如何使用指令检查输入值的长度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个可以验证输入的自定义属性指令,它有没有价值.请参考以下代码.
我不知道为什么如果条件不起作用,在 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:
输入{背景颜色:红色;}.重点输入{背景颜色:绿色;}
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;
}
这篇关于Angular 2/4:如何使用指令检查输入值的长度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文