Как отобразить длину строки в текстовом поле, используя события в угловых.?

Question

Я делаю задачу, в которой мне нужно отобразить длину строки, введенной в текстовое поле, используя События.Еще одно дополнительное условие: если длина строки больше 4, то только она будет отображать длину, которая должна быть достигнута с помощью ngIf.

Работа, проделанная мной до сих пор В HTML

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

In .ts

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

Answer 1

Это окончательный ответ, который я получил .. в 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>

IN .ts

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

Answer 2

Я надеюсь, что это то, что вы ожидаете пример

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

Вы уже связываете tname, используя директиву ngModel, которая является двусторонней привязкой.Так что tname. Длина решит вашу проблему.

Вот решение

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
}

Надеюсь, эта помощь!