从文本区域获取用户输入答案

【问题标题】：Get user input from textarea从文本区域获取用户输入
【发布时间】：2016-10-20 06:23:36
【问题描述】：

我是 angular2 的新手。我想将来自文本区域的用户输入存储在组件中的变量中，以便我可以对这个输入应用一些逻辑。我试过ngModel，但它不起作用。我的文本区域代码：

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

在我的组件内部：

str: string;
//some logic on str

但我在组件内的str 中没有任何价值。我使用ngModule 的方式有问题吗？

【问题讨论】：

我不认为角度属性和值之间有很大的空间。这可以解释这个问题

标签： data-binding angular textarea angular-ngmodel

【解决方案1】：

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

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

【讨论】：

可以在哪个范围内使用titleInput ID？我有一个这样的工作示例并重新排列了样式问题的代码，但知道它说：无法读取未定义的“值”
这更像是作者想要textarea标签时使用input标签的一种变通方法。

【解决方案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);
}

希望我能帮到你。

【讨论】：

【解决方案3】：

使用 Angular2 RC2 测试

我尝试了一个类似于你的代码-sn-p，它对我有用；）请参阅我的模板中的 [(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);
  }
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

如果我们想要一个我们想要预填充值的输入字段以及我们想要访问组件中的该输入字段怎么办。我们能做到吗？
不使用（输入）就不能绑定值吗？

【解决方案5】：

这是完整的组件示例

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

@Component({
  selector: 'app-text-box',
  template: `
        <h1>Text ({{textValue}})</h1>
        <input #textbox type="text" [(ngModel)]="textValue" required>
        <button (click)="logText(textbox.value)">Update Log</button>
        <button (click)="textValue=''">Clear</button>

        <h2>Template Reference Variable</h2>
        Type: '{{textbox.type}}', required: '{{textbox.hasAttribute('required')}}',
        upper: '{{textbox.value.toUpperCase()}}'

        <h2>Log <button (click)="log=''">Clear</button></h2>
        <pre>{{log}}</pre>`
})
export class TextComponent {

  textValue = 'initial value';
  log = '';

  logText(value: string): void {
    this.log += `Text changed to '${value}'\n`;
  }
}

【讨论】：

【解决方案6】：

删除= 周围的空格：

<div>    
  <input type="text" [(ngModel)]="str" name="str">
</div>

但是您需要在后端拥有名为 str 的变量，它应该可以正常工作。

【讨论】：

【解决方案7】：

如果在表单标签中使用 ngModel，则必须设置名称属性或表单。控件必须在 ngModelOptions 中定义为“独立”。

使用以下两种之一：

<textarea [(ngModel)]="person.firstName" name="first"></textarea>

<textarea [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"></textarea>

它对我有用。

【讨论】：