data-binding - example - textarea angular 5

Obtener la opinión del usuario de textarea

Question

Soy nuevo en angular2. Quiero almacenar la entrada del usuario desde un área de texto en una variable en mi componente para poder aplicar algo de lógica a esta entrada. Intenté ngModel pero no funciona. Mi código para el área de texto:

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

Y dentro de mi componente:

str: string;
//some logic on str

Pero no obtengo ningún valor en str dentro de mi componente. ¿Hay ngModule error con la forma en que estoy usando ngModule ?

Answer 1

Aquí está el ejemplo de componente completo

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

Answer 2

Creo que no deberías usar espacios entre el [(ngModel)] the = y el str . Luego debe usar un botón o algo similar con una función de clic y en esta función puede usar los valores de sus inputfields .

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

y en tu archivo de componente

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

Espero poder ayudarte.

Answer 3

Por si acaso, en lugar de [(ngModel)] puede usar (input) ( se dispara cuando un usuario escribe algo en la entrada <textarea> ) o (blur) ( se dispara cuando un usuario abandona el evento de entrada <textarea> ) ,

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

Answer 4

Probado con Angular2 RC2

Probé un fragmento de código similar al suyo y me funciona;) vea [(ngModel)] = "str" ​​en mi plantilla. Si presiona el botón, la consola registra el contenido actual del campo textarea-field. Espero eso ayude

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 5

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

Pero necesita tener la variable llamada str en back-end, que debería funcionar bien.

Answer 6

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

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