Angular2 ang Eingabewerte erhalten

Question

Ich bin neu bei angular2. Ich möchte Benutzereingaben aus einem Textbereich in einer Variablen in meiner Komponente speichern, damit ich eine Logik auf diese Eingabe anwenden kann. Ich habe versucht ngModel, aber es funktioniert nicht. Mein Code für das Textfeld:

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

Und in meiner Komponente:

str: string; 
//some logic on str 

Aber ich keinen Wert in str in meiner Komponente erhalten. Gibt es einen Fehler bei der Art, wie ich verwende?

Answer 1

Getestet mit Angular2 RC2

ich einen Code-Schnipsel ähnlich wie bei Ihnen ausprobiert und es funktioniert für mich;) siehe [(ngModel)] = "str" ​​in meiner Vorlage Wenn Sie die Taste drücken, die console protokolliert den aktuellen Inhalt des Textfeldfeldes. Hoffe, es

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 2

hilft Ich glaube, Sie keine Leerzeichen zwischen dem [(ngModel)] der = und der str verwenden sollten. Dann sollten Sie eine Schaltfläche oder etwas ähnliches mit einer Klick-Funktion verwenden und in dieser Funktion können Sie die Werte Ihrer inputfields verwenden.

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

und in der Komponentendatei

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

Hoffe, dass ich Ihnen helfen kann.

Answer 3

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

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

Answer 4

Nur für den Fall, statt [(ngModel)] können Sie verwenden (input) (wird ausgelöst, wenn ein Benutzer etwas im Eingabe <textarea> schreibt) oder (blur) (wird ausgelöst, wenn ein Benutzer verlässt den Eingang <textarea>) Ereignis,

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

Answer 5

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

Aber Sie müssen die Variablebenannt haben 0 am Back-End, als es sollte gut funktionieren. Hier

Answer 6

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