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

Пользователь

от richie_mayert , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от bernardo_nolan , год назад

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


Пользователь

от aaron_armstrong , 4 месяца назад

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