Comment comptez-vous les caractères, y compris l'espace dans l'événement keyup dans angular 6?

import { Component } from '@angular/core';
@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }
3
Kevin Daniel 20 nov. 2018 à 08:13

4 réponses

Meilleure réponse

Vous pouvez compter le caractère par box.value.length ou box.value?.length

? après que la propriété vérifie si non défini.

7
kousher alam pranto 20 nov. 2018 à 05:19

En utilisant la liaison bidirectionnelle, vous pouvez vous lier à box et il sera automatiquement mis à jour avec les modifications. Vous n'avez pas besoin d'utiliser un gestionnaire d'événements (keyup) ici:

template: `
    <input [(ngModel)]="box">
    <p>{{box.length}}</p>
  `    

Dans votre module, importez le FormsModule à partir d'ici:

import { FormsModule } from '@angular/forms';

Et cela vous permettra d'utiliser ngModel. [()] active la liaison bidirectionnelle, ce qui signifie que l'affichage et la valeur resteront automatiquement synchronisés sans aucune logique supplémentaire.

1
JBoothUA 20 nov. 2018 à 05:24

Utiliser {{box.value.length}}

import { Component } from '@angular/core';
@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
    <p>{{box.value.length}}</p>
  `
})
export class LoopbackComponent { }
0
Krishna Rathore 20 nov. 2018 à 05:19

Vous pouvez également utiliser la méthode ci-dessous:

import { Component } from '@angular/core';
@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="onKeyUp(box)">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { 

  onKeyUp(boxInput : HTMLInputElement){
    let length = boxInput.value.length ; //this will have the length of the text entered in the input box
    console.log(length);
  }
}
0
CruelEngine 20 nov. 2018 à 05:35