web-dev-qa-db-fra.com

Comment vérifier si la zone de texte est vide ou non dans angular 2?

J'ai zone de texte, je dois vérifier les données lorsque nous entrons le texte dans la zone de texte.J'ai écrit la méthode de changement, mais cela ne fonctionne pas Voici le code.

<textarea (change)="textAreaEmpty(textValue)" #textValue></textarea>

composant

 textAreaEmpty(text:string){
      if(text.length > 0)
        console.log(text);
  }

Je dois également vérifier le nombre de lignes entrées par l'utilisateur dans la zone de texte. Je ne trouve aucune solution dans anuglar2. Je suis en mesure d'obtenir les données avec jquery ou javascript, mais je ne souhaite pas l'utiliser. je veux l'utiliser dans angular 2, n'importe quel corps peut m'aider?

angularangular2-forms
4
Sathish Kotha

Je peux obtenir les données avec jquery ou javascript, mais je ne veux pas l'utiliser. je veux l'utiliser dans angular 2, n'importe quel corps peut m'aider?

Utilisez [ngModel] si vous voulez le faire plus "angulaire" ...

<textarea [ngModel]="textValue" (ngModelChange)="textAreaEmpty()"></textarea>

TS: 

textValue: string = '';

textAreaEmpty(){
  if (this.textValue != '') {
    console.log(this.textValue);
  }
}
6
AJT_82

textValue n'est pas une valeur dans ce cas. Il s’agit de l’ensemble de l’élément d’entrée. Par conséquent, si vous souhaitez vérifier s’il a sa propre valeur, vous devez modifier votre code HTML comme suit:

<textarea (change)="textAreaEmpty(textValue.value)" #textValue></textarea>
2
elzoy

Validation pour new-lines, white-spaces ou null

if(value.trim().length === 0)
   console.log('No input found')

Exécuter un extrait de code pour tester

insérez new-lines et white-spaces, mais vous n'obtiendrez aucune sortie sur le champ de sortie

document.getElementsByName("text")[0].addEventListener('change', onChange);

function onChange(){
  if (this.value.trim().length != 0) {
       console.log('Here is your output: ')
       console.log(this.value)
   }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<textarea name="text" rows="3" class="form-control" placeholder="Write and check"></textarea>

1
WasiF