Обработка изменений ввода формы в Angular: методы и примеры

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

Метод 1: использование форм на основе шаблонов

Формы, управляемые шаблонами, предоставляют простой способ обработки изменений ввода формы в Angular. Вы можете использовать событие (ngModelChange)для обнаружения и реагирования на изменения в полях ввода. Вот пример:

<input type="text" [(ngModel)]="companyName" (ngModelChange)="fillUnit()" name="companyname" class="form-control" [class.is-invalid]="f.companyname.invalid">

В этом примере событие ngModelChangeпривязано к методу fillUnit(), который будет вызываться при каждом изменении входного значения.

Метод 2: использование реактивных форм

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

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-my-form',
  template: `
    <input type="text" [formControl]="companyNameControl" class="form-control">
  `,
})
export class MyFormComponent {
  companyNameControl = new FormControl();
  constructor() {
    this.companyNameControl.valueChanges.subscribe(() => {
      this.fillUnit();
    });
  }
}

В этом примере на наблюдаемую valueChangesподписывается, а метод fillUnit()вызывается всякий раз, когда изменяется входное значение.

Метод 3: использование привязки событий

Другой способ обработки изменений ввода формы — использование привязки событий. Вы можете привязать событие (change)к методу в классе вашего компонента. Вот пример:

<input type="text" (change)="fillUnit()" [formControl]="companyNameControl" class="form-control">

В этом примере событие (change)привязано к методу fillUnit(), который будет запускаться при каждом изменении входного значения.

Метод 4: использование директивы ngModelChange

Директива ngModelChangeтакже может использоваться для обработки изменений ввода формы. Это позволяет вам привязать метод непосредственно к полю ввода. Вот пример:

<input type="text" [ngModel]="companyName" (ngModelChange)="fillUnit()" name="companyname" class="form-control" [class.is-invalid]="f.companyname.invalid">

В этом примере событие ngModelChangeпривязано к методу fillUnit(), который будет вызываться при каждом изменении входного значения.

Заключение

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

Эффективная обработка изменений ввода формы имеет решающее значение для создания надежных и интерактивных приложений Angular. Используя методы и примеры, представленные в этой статье, вы сможете улучшить взаимодействие с пользователем и обеспечить точный сбор данных.