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?

Answer 1

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>

Answer 2

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);
  }
}