Get user input from textarea
<pre>
<input type="text" #titleInput>
<button type="submit" (click) = 'addTodo(titleInput.value)'>Add</button>
</pre>
{
addTodo(title:string) {
console.log(title);
}
}
I think you should not use spaces between the [(ngModel)]
the =
and the str
. Then you should use a button or something like this with a click function and in this function you can use the values of your inputfields
.
<input id="str" [(ngModel)]="str"/>
<button (click)="sendValues()">Send</button>
and in your component file
str: string;
sendValues(): void {
//do sth with the str e.g. console.log(this.str);
}
Hope I can help you.
Tested with Angular2 RC2
I tried a code-snippet similar to yours and it works for me ;) see [(ngModel)] = "str" in my template If you push the button, the console logs the current content of the textarea-field. Hope it helps
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);
}
}
Just in case, instead of [(ngModel)]
you can use (input)
(is fired when a user writes something in the input <textarea>
) or (blur)
(is fired when a user leaves the input <textarea>
) event,
<textarea cols="30" rows="4" (input)="str = $event.target.value"></textarea>
Here is full component example
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`;
}
}