В Angular отслеживание изменений входных значений является общим требованием для различных сценариев. Если вам нужно обнаружить изменения для целей проверки, инициировать определенные действия или динамически обновить пользовательский интерфейс, для этого существует несколько методов. В этой статье блога мы рассмотрим несколько подходов с примерами кода, которые помогут вам эффективно отслеживать изменения ввода в Angular.

Метод 1: использование ngModel и ngModelChange
Директива ngModel в Angular обеспечивает двустороннюю привязку данных. Объединив его с событием ngModelChange, вы можете легко отслеживать изменения входных значений. Вот пример:

<input [(ngModel)]="myInput" (ngModelChange)="onInputChange()">

myInput: string;
onInputChange() {
  // Handle input change logic
}

Метод 2: использование реактивных форм и изменений значений
Модуль реактивных форм Angular предлагает мощный способ управления формами и отслеживания изменений входных данных. Подписавшись на наблюдаемую valueChanges элемента управления формой, вы можете обнаружить изменения. Вот пример:

import { FormGroup, FormControl } from '@angular/forms';
myForm: FormGroup;
ngOnInit() {
  this.myForm = new FormGroup({
    myInput: new FormControl('')
  });
  this.myForm.controls['myInput'].valueChanges.subscribe((value) => {
    // Handle input change logic
  });
}

Метод 3: использование ViewChild и ElementRef
Если у вас есть ссылка на входной элемент, вы можете использовать ViewChild и ElementRef для непосредственного обнаружения изменений. Вот пример:

<input #myInputRef (input)="onInputChange(myInputRef.value)">

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myInputRef', { static: false }) myInput: ElementRef;
onInputChange(value: string) {
  // Handle input change logic
}

Метод 4: использование Output EventEmitter
Вы можете создать собственный входной компонент с Output EventEmitter для отправки входных изменений. Вот пример:

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-custom-input',
  template: `
    <input [(ngModel)]="myInput" (ngModelChange)="onInputChange()">
  `
})
export class CustomInputComponent {
  @Output() inputChange: EventEmitter<void> = new EventEmitter<void>();
  myInput: string;
  onInputChange() {
    this.inputChange.emit();
  }
}

Отслеживание изменений входных данных в Angular важно для многих приложений. В этой статье мы рассмотрели четыре различных метода выполнения этой задачи: использование ngModel и ngModelChange, Reactive Forms и valueChanges, ViewChild и ElementRef, а также Output EventEmitter. В зависимости от вашего конкретного варианта использования вы можете выбрать наиболее подходящий метод для эффективного отслеживания изменений ввода в ваших проектах Angular.