如何在角度 2 中检查文本区域是否为空？答案

【问题标题】：How to check if text area is empty or not in angular 2?如何在角度 2 中检查文本区域是否为空？
【发布时间】：2017-08-09 06:08:50
【问题描述】：

我有文本区域框，当我们在文本区域中输入文本时，我需要检查数据。我写了更改方法，但那不起作用这是代码。

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

组件

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

我还需要检查用户在文本区域中输入了多少行。我想在 anuglar2 中找到任何解决方案，我可以使用 jquery 或 javascript 获取数据，但我不想使用它。我想在 Angular 2 中使用它，任何人都可以帮助我吗？

【问题讨论】：

textAreaEmpty(textValue.value)?
stackoverflow.com/questions/2035910/…
感谢它的工作。但是在文本区域中输入某些内容时不会调用更改方法。如果我点击文本区域之外的方法正在调用。
使用input 事件而不是change。所以(input)="textAreaEmpty(textValue.value)"
感谢 yurzui，输入事件正常

标签： angular angular2-forms

【解决方案1】：

我可以使用 jquery 或 javascript 获取数据，但我不想使用它。我想在 Angular 2 中使用它，任何人都可以帮助我吗？

如果您想更“Angularish”，请使用[ngModel]...

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

TS：

textValue: string = '';

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

【讨论】：

没问题，很高兴能帮上忙 :)

【解决方案2】：

textValue 在这种情况下不是一个值。这是整个输入元素，所以如果你想检查它是否有自己的价值，你需要改变你的 html 如下：

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

【讨论】：

【解决方案3】：

验证new-lines、white-spaces 或null

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

运行代码 sn-p 进行测试

插入 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>

【讨论】：