Angular2 ang con valori di input

Question

Sono nuovo su angular2. Voglio memorizzare l'input dell'utente da un'area di testo in una variabile nel mio componente in modo da poter applicare un po 'di logica a questo input. Ho provato ngModel ma non funziona. Il mio codice per la textarea:

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

E dentro la mia componente:

str: string; 
//some logic on str 

Ma io non ottengono alcun valore in str dentro la mia componente. C'è un errore nel modo in cui sto usando ngModule?

Answer 1

Testato con Angular2 RC2

ho provato un codice-frammento di simile al tuo e funziona per me;) vedere [(ngModel)] = "str" ​​nel mio modello Se si preme il pulsante, il console registra il contenuto corrente del campo textarea. Speranza che aiuta

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

Credo che non si dovrebbe usare gli spazi tra il [(ngModel)] la = e str. Quindi dovresti usare un pulsante o qualcosa di simile con una funzione click e in questa funzione puoi usare i valori del tuo inputfields.

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

e nel file componente

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

Speranza ti posso aiutare.

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

Solo nel caso, invece di [(ngModel)] è possibile utilizzare (input) (è sparato quando un utente scrive qualcosa in entrata <textarea>) o (blur) (viene attivato quando un utente lascia l'<textarea> ingresso) evento,

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

Answer 5

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

Ma è necessario avere la variabile chiamata str su back-end, che dovrebbe funzionare correttamente.

Answer 6

Ecco pieno esempio componente

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