CODEWITHSUNDEEP
angularangular2-forms
Sathish Kotha
Sathish Kotha

Reputation: 1111

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

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?

Upvotes: 10

Views: 39424

Answers (3)

AVJT82
AVJT82

Reputation: 73357

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

Upvotes: 11

WasiF
WasiF

Reputation: 28879

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>

Upvotes: 4

elzoy
elzoy

Reputation: 5435

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>

Upvotes: 4

Related Questions