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）] =＆＃34; str＆＃34;在我的模板中如果按下按钮，控制台将记录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> 中写入内容时会触发）或{{1 （>当用户离开输入(blur) ）事件时会触发，

<textarea>

Answer 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`;
  }
}

Answer 6

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

但你需要在后端使用名为str的变量，而不应该正常工作。

Answer 7

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

使用这两个之一：

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

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

它对我有用。

从textarea

7 个答案: