web-dev-qa-db-ja.com

テキストエリアからユーザー入力を取得する

私はangular2が初めてです。コンポーネントの変数にテキスト領域からのユーザー入力を保存して、この入力に何らかのロジックを適用できるようにします。 ngModelを試しましたが、うまくいきません。テキストエリアの私のコード：

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

そして私のコンポーネント内：

str: string;
//some logic on str

しかし、コンポーネント内のstrには値がありません。 ngModuleの使用方法にエラーがありますか？

data-bindingangulartextareaangular-ngmodel
46
Maryam
<pre>
  <input type="text"  #titleInput>
  <button type="submit" (click) = 'addTodo(titleInput.value)'>Add</button>
</pre>

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

[(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);
}

お役に立てば幸いです。

31
KaFu

Angular2 RC2でテスト済み

私はあなたのものに似たコードスニペットを試しましたが、それは私のために動作します;）[（ngModel）] = "str"を参照してください。テンプレートを押します。それが役に立てば幸い

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);
  }
}
8
peter z.

念のため、[(ngModel)]の代わりに(input)（ユーザーが入力<textarea>_に何かを書き込むと起動されます）または(blur)（ユーザーが入力<textarea>を離れると起動されますを使用できます）イベント、

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

完全なコンポーネントの例はこちら

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`;
  }
}
3
valentasm
<div>    
  <input type="text" [(ngModel)]="str" name="str">
</div>

ただし、バックエンドでstrという名前の変数を使用する必要があります。これは正常に機能するはずです。

1
chavy