如何使用 angular. 中的事件在文本字段中显示字符串的长度？

Question

我正在执行一项任务，我需要使用事件显示输入到文本字段中的字符串的长度。另一个附加条件是，如果字符串长度大于 4，那么它只会显示使用 ngIf 应该达到的长度。

到目前为止我完成的工作在HTML

<div class="container">
    <input type="text" placeholder="Default Message" 
    [(ngModel)]="tname"
    (tname)="event('tname')">
    {{s}}
</div>

在.ts

tname:string;
k:number;
event(s:string){
this.k = s.length ;
 console.log(s);
}

Answer 1

您已经使用双向绑定的 ngModel 指令绑定了 tname。所以只要 tname.length 就能解决你的问题。

这是解决方案

HTML

<div class="container">
    <input type="text" placeholder="Default Message" 
    [(ngModel)]="tname"
    (tname)="event('tname')">
    {{s}}
 <span *ngIf="this.k > 4"> Length is {{this.k}}></span>
</div>

TS

event(s:string){
  this.k = this.tname.length ;
    console.log(this.k); // displaying  length
}

希望对您有所帮助！

Answer 2

希望这就是您所期待的 example

Answer 3

Html

<div class="container">
  <input type="text" (keyup)="onKeyUp($event)" /> <strong>Result- {{value}}</strong>
  <p></p>
</div>

TS文件

  value;
  onKeyUp(e) {
    this.value = e.target.value.length;
  }

Answer 4

这是我得到的最终答案.. 在 HTML

<div class="container">Name:<br>
<input type="text" placeholder="Default Message" 
[(ngModel)]="tname"
(change)="event('change')"><br>
<span *ngIf="this.k >=4"> Length={{k}}</span>
</div>

输入.ts

 tname:string='';
 k:number=0;
 event(s:string){
 this.k = this.tname.length ;
 console.log(this.k);
}

如何使用 angular. 中的事件在文本字段中显示字符串的长度？

How to display the length of string in textfield using events in angular.?

events

angular-ng-if

angular