从textarea获取用户输入

Question

我是angular2的新手.我想将文本区域中的用户输入存储在组件中的变量中,以便我可以将一些逻辑应用于此输入.我试过ngModel但它不起作用.我的textarea代码:

<textarea cols="30" rows="4" [(ngModel)] = "str"></textarea>

在我的组件内:

str: string;
//some logic on str

但str我的组件内部没有任何价值.我使用的方式有错误ngModule吗？

Answer 1

<pre>
  <input type="text"  #titleInput>
  <button type="submit" (click) = 'addTodo(titleInput.value)'>Add</button>
</pre>

{
  addTodo(title:string) {
    console.log(title);
  }
}    

Answer 2

我认为你不应该[(ngModel)]在=和之间使用空格str.然后你应该使用一个按钮或类似的东西,点击功能,在这个功能,你可以使用你的值inputfields.

<input id="str" [(ngModel)]="str"/>
<button (click)="sendValues()">Send</button>

并在您的组件文件中

str: string;
sendValues(): void {
//do sth with the str e.g. console.log(this.str);
}

希望我能帮助你.

Answer 3

用Angular2 RC2测试

我尝试了类似于你的代码片段,它对我有用;)在我的模板中看到[(ngModel)] ="str"如果你按下按钮,控制台会记录textarea-field的当前内容.希望能帮助到你

textarea的-component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'textarea-comp',
  template: `
      <textarea cols="30" rows="4" [(ngModel)] = "str"></textarea>
      <p><button (click)="pushMe()">pushMeToLog</button></p>
  `
})

  export class TextAreaComponent {
    str: string;

  pushMe() {
      console.log( "TextAreaComponent::str: " + this.str);
  }
}

Answer 4

以防万一，[(ngModel)]您可以使用(input)（当用户在输入中写东西<textarea>时触发）或(blur)（当用户离开输入时触发<textarea>）事件，

<textarea cols="30" rows="4" (input)="str = $event.target.value"></textarea>