Реактивные формы в Angular: прослушивание изменений

Экземпляры реактивной формы, такие как FormGroup и FormControl, имеют метод valueChanges, который возвращает наблюдаемое значение, которое выдает последние значения. Поэтому вы можете подписаться на valueChanges для обновления переменных экземпляра или выполнения операций.

Взгляните на наше введение в Reactive Forms, если все это для вас ново.

Здесь мы создадим очень простой пример, который обновляет строку шаблона каждый раз при изменении значения в форме.

Во-первых, давайте инициализируем нашу реактивную форму с помощью FormBuilder:

myForm: FormGroup;
formattedMessage: string;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: '',
    email: '',
    message: ''
  });

  this.onChanges();
}

Обратите внимание, как мы вызываем метод onChanges в хуке жизненного цикла ngOnInit после инициализации нашей формы. Вот содержимое нашего метода onChanges:

onChanges(): void {
  this.myForm.valueChanges.subscribe(val => {
    this.formattedMessage =
    `Hello,

    My name is ${val.name} and my email is ${val.email}.

    I would like to tell you that ${val.message}.`;
  });
}

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

onChanges(): void {
  this.myForm.get('name').valueChanges.subscribe(val => {
    this.formattedMessage = `My name is ${val}.`;
  });
}

🌌 Поскольку valueChanges возвращает наблюдаемое значение, ваше небо в значительной степени является пределом того, что вы можете делать с испускаемыми значениями.