How to check if text area is empty or not in angular 2?

Question

I have text area box ,I need to check the data when we enter the text in the text area.I written change method but that is not working here is the code.

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

component

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

I also need to check how many rows user entered in the text area.i dint find any solution in anuglar2 ,I am able to get the data with jquery or javascript,but i don't want to use that. i want to use it in angular 2,Can any body help me?

http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea — yurzui, Mar 17 '17 at 15:45
thanks its working.but change method is not calling when entered some thing in the text area.if i click outside of text area method is calling. — Sathish Kotha, Mar 17 '17 at 15:48
use `input` event instead of `change`. So `(input)="textAreaEmpty(textValue.value)"` — yurzui, Mar 17 '17 at 15:49

AT82 · Accepted Answer · 2019-03-14T09:06:36.470

11

I am able to get the data with jquery or javascript,but i don't want to use that. i want to use it in angular 2,Can any body help me?

Use [ngModel] if you want to do it more "Angularish"...

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

TS:

textValue: string = '';

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

edited Mar 14 '19 at 09:06

answered Mar 17 '17 at 15:46

AT82

71,416
24
140
167

No problem, glad I could help :) – AT82 Mar 17 '17 at 16:07

score 3 · Answer 2 · answered Mar 17 '17 at 15:47

3

textValue is not a value in this case. It's the whole input element so if you'd like to check if it has it's own value, you need to change your html as follows:

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

answered Mar 17 '17 at 15:47

elzoy

5,237
11
40
65

WasiF · Answer 3 · 2019-01-18T09:47:12.673

Validation for new-lines, white-spaces or null

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

Run code snippet to test

insert new-lines and white-spaces but you'll not get any output on focus-out from input field

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>

How to check if text area is empty or not in angular 2?

3 Answers3