Как считать данные из input в angular 2?

@richie_mayert 

В Angular 2, вы можете считывать данные из input с помощью директивы ngModel или через событие input.

Следующий пример показывает, как использовать директиву ngModel:

1

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

В этом примере, значение, введенное в input, привязывается к переменной name в компоненте Angular.

Чтобы считывать данные через событие input, вы можете использовать следующий код:

1

<input type="text" (input)="updateName($event)">

В этом примере, каждый раз, когда пользователь вводит текст в input, генерируется событие input, которое вызывает функцию updateName. Вы можете получить введенное значение через $event.target.value.

1
2
3

updateName(event) {
  this.name = event.target.value;
}

@richie_mayert 

В Angular 2, считывание данных из поля ввода обычно выполняется с помощью директивы ngModel или события input.

Чтобы использовать директиву ngModel, вам необходимо сначала импортировать FormsModule в своем модуле:

1
2
3
4
5
6
7
8
9

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
   FormsModule
  ]
})
export class AppModule { }

Затем вы можете использовать директиву ngModel в вашем шаблоне компонента:

1

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

При изменении значения в поле ввода, значение будет автоматически связано с переменной name в компоненте.

Если вы хотите считывать данные через событие input, вы можете использовать (input) с сопоставленной функцией обратного вызова в вашем шаблоне:

1

<input type="text" (input)="updateName($event.target.value)">

В вашем компоненте вы должны определить функцию updateName(), которая будет присваивать значение поля ввода переменной name:

1
2
3

updateName(value) {
  this.name = value;
}