Как проверить, пуста ли текстовая область в angular 2?

У меня есть поле с текстовой областью, мне нужно проверить данные, когда мы вводим текст в текстовую область. Я написал метод изменения, но это не работает, вот код.

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

компонент

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

Мне также нужно проверить, сколько строк пользователь ввел в текстовую область. Я не могу найти какое-либо решение в anuglar2, я могу получить данные с помощью jquery или javascript, но я не хочу это использовать. Я хочу использовать его в angular 2, может ли кто-нибудь мне помочь?


angular angular2-forms
person Sathish Kotha    schedule 17.03.2017    source источник
comment
stackoverflow.com/questions/2035910/   -  person yurzui    schedule 17.03.2017
comment
спасибо за его работу. но метод изменения не вызывается, когда вводится что-то в текстовой области. если я нажимаю за пределами текстовой области, вызывается метод.   -  person Sathish Kotha    schedule 17.03.2017
comment
используйте событие input вместо change. Итак (input)="textAreaEmpty(textValue.value)"   -  person yurzui    schedule 17.03.2017
comment
спасибо yurzui, событие ввода работает   -  person Sathish Kotha    schedule 17.03.2017

Ответы (3)


arrow_upward
9
arrow_downward

Я могу получить данные с помощью jquery или javascript, но не хочу их использовать. Я хочу использовать его в angular 2, может ли кто-нибудь мне помочь?

Используйте [ngModel], если хотите сделать это более "угловатым" ...

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

TS:

textValue: string = '';

textAreaEmpty(){
  if (this.textValue != '') {
    console.log(this.textValue);
  }
}
person AJT82    schedule 17.03.2017
comment
Нет проблем, рад, что смог помочь :) - person AJT82; 17.03.2017

arrow_upward
3
arrow_downward

textValue в этом случае не является значением. Это весь элемент ввода, поэтому, если вы хотите проверить, есть ли у него собственное значение, вам нужно изменить свой html следующим образом:

<textarea (change)="textAreaEmpty(textValue.value)" #textValue></textarea>
person elzoy    schedule 17.03.2017

arrow_upward
3
arrow_downward

Проверка для new-lines, white-spaces или null

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

Запустите фрагмент кода для проверки

вставьте new-lines и white-spaces, но вы не получите никакого вывода при выходе из поля ввода

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>

person WasiF    schedule 24.07.2018