Angular2 ang получать входные значения

Я новичок в angular2. Я хочу сохранить пользовательский ввод из текстовой области в переменной в моем компоненте, чтобы я мог применить некоторую логику к этому вводу. Я пробовал ngModel, но он не работает. Мой код для текстового поля:

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

И внутри моего компонента:

str: string;
//some logic on str

Но я не получаю значения в str внутри моего компонента. Есть ли ошибка с тем, как я использую ngModule?

Ответ 1

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

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

Ответ 2

Я думаю, вы не должны использовать пробелы между "[(ngModel)]" the "=" и "str". Затем вы должны использовать кнопку или что-то вроде этого с функцией щелчка, и в этой функции вы можете использовать значения ваших полей ввода.

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

и в вашем файле компонента

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

Надеюсь, я могу вам помочь.

Ответ 3

Протестировано с помощью Angular2 RC2

Я попробовал фрагмент кода, похожий на ваш, и он работает для меня;) см. [(ngModel)] = "str" в моем шаблоне Если вы нажмете кнопку, консоль зарегистрирует текущее содержимое поля textarea. Надеюсь, что это поможет.

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

Ответ 4

Вот полный пример компонента

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

Ответ 5

На всякий случай вместо [(ngModel)] вы можете использовать (input) (запускается, когда пользователь пишет что-то на входе <textarea>) или (blur) (запускается, когда пользователь выходит из ввода <textarea>). событие,

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

Ответ 6

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

Но вам нужно иметь переменную с именем str на back-end, чем она должна работать нормально.