Get user input aus textarea

Ich bin neu angular2. Ich möchte zum speichern der Benutzer-Eingaben aus einem Textfeld in eine variable in meine Komponente so kann ich gelten einige Logik-Eingang. Ich habe versucht ngModel aber es funktioniert nicht. Mein code für die textarea:

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

Und innerhalb meiner Komponente:

str: string;
//some logic on str

Aber ich bekomme nicht einen beliebigen Wert in str innerhalb meiner Komponente. Ist es ein Fehler mit der Art und Weise bin ich mit ngModule ?

Ich glaube nicht, dass Räume sind laut zwischen Winkel-Eigenschaften und-Werten. Das mag erklären, warum die Frage

InformationsquelleAutor Maryam | 2016-06-18

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

{
  addTodo(title:string) {
    console.log(title);
  }
}    
```
- In welchem Umfang kann ich die titleInput ID? Ich hatte ein workin Beispiel, wie dies und umgestaltet code für styling-Fragen, sondern es wissen sagt: Cannot read 'Wert' undefined
InformationsquelleAutor Arthur Qocharyan
31

Ich denke, Sie sollten keine Leerzeichen zwischen den [(ngModel)] die = und die str. Dann sollten Sie über einen button oder sowas in der Art mit Klick-Funktion und in dieser Funktion können Sie die Werte von Ihrer inputfields.
```
<input id="str" [(ngModel)]="str"/>
<button (click)="sendValues()">Send</button>
```
und in der Komponente Datei
```
str: string;
sendValues(): void {
//do sth with the str e.g. console.log(this.str);
}
```
Hoffe, dass ich Ihnen helfen kann.

InformationsquelleAutor KaFu

Getestet mit Angular2 RC2

Versuchte ich ein code-snippet ähnlich wie bei Ihnen und es funktioniert für mich 😉
siehe [(ngModel)] = "str" in mein template
Wenn Sie den Knopf drücken, die Konsole meldet den aktuellen Inhalt des textarea-Feld. Hoffe es hilft

textarea-Komponente.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);
  }
}

InformationsquelleAutor peter z.

5

Nur für den Fall, anstelle der [(ngModel)] können Sie (input) (ausgelöst wird, wenn ein user etwas schreibt, was in der Eingabe <textarea>) oder (blur) (ausgelöst wird, wenn ein Benutzer verlässt den Eingang <textarea>) Ereignis,
```
<textarea cols="30" rows="4" (input)="str = $event.target.value"></textarea>
```
- Was ist, wenn wir wollen, um ein input-Feld, wo wir Sie haben wollen vorausgefüllt-Wert als auch wir wollen Zugriff auf die Eingabe-Feld in Komponenten. Können wir das tun?
InformationsquelleAutor Yas

Hier ist voll Komponente Beispiel

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

InformationsquelleAutor valentasm

1
```
<div>    
  <input type="text" [(ngModel)]="str" name="str">
</div>
```
Aber müssen Sie die variable mit dem Namen str auf back-end, als sein, sollte aber funktionieren.

InformationsquelleAutor chavy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.