typescript Angular 2/4：如何使用指令检查输入值的长度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46346486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2/4 : How to check length of input's value using directive?
提问by AmitV
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?
我不知道为什么如果条件不起作用，在 console.log 中它只显示 0。我的代码有什么问题吗？
I tried with other angular's app lifecycle event too.
我也尝试过其他 angular 的应用程序生命周期事件。
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);
}
}
}
采纳答案by Vega
You can track the input length changes in DoCheck:
您可以在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
HTML
<div>
<input [inputfocus]="fname" name="name" [(ngModel)]="fname" type="text">
</div>
CSS:
CSS：
input{
background-color:red;
}
.focused input{
background-color:green;
}
回答by Aakash Jain
If all you are trying to do is apply a class to the containing element when an input has some text inside it, you do not need a directive for this.
如果您要做的只是在输入包含一些文本时将类应用于包含元素，那么您不需要为此设置指令。
<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 -->
But if you absolutely must make a directive for this, then do the following:
但是，如果您绝对必须为此制定指令，请执行以下操作：
@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);
}
}
}
回答by Arjun Nayak
I have created a similar example.
我创建了一个类似的例子。
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);
}
}
in the html part
在 html 部分
<input class="mask-text" value="hello" inputfocus type="text"/>
