Блог

Я изучаю ngOnChanges официальные документы. Это не регистрирует изменения в форме HTML.

Я импортировал FormsModule и ReactiveFormsModule в app.module.ts :

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Я сделал небольшую форму в app.component.html :

 Favorite Color: <input type="text" [formControl]="favoriteColorControl">

<p>Your favorite color is {{favoriteColorControl.value}}.</p>
 

В app.component.ts я импортировал Input , OnChanges , SimpleChanges и модуль forms. Затем я создал @Input объект и настроил ngOnChanges его для регистрации изменений:

 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnChanges {
  @Input() favoriteColorControl = new FormControl('');

  ngOnChanges(changes: SimpleChanges): void {
    console.log(this.favoriteColorControl.value);
    console.log(changes);
    console.log(changes.favoriteColorControl.currentValue);
  }
}
 

Форма работает. Если вы введете «розовый» в форму, он сообщит вам, что ваш любимый цвет розовый. Но в консоли ничего не регистрируется.

Я где-то читал, что ngOnChanges обнаруживает только изменения, переданные из дочернего компонента в родительский компонент. Я создал дочерний компонент и отобразил дочернее представление в родительском представлении, но это ничего не регистрировало.

Вы делаете это так неправильно. Реактивные формы не используются @Input , поэтому они не подлежат ngOnChanges . Вы утверждаете, что «следуете» руководству, но в нем этого нет. Использование @Input — это одно, использование реактивных форм — совсем другое.

ngOnChanges сработает, когда некоторые (текущие) привязки component @Input изменятся. В вашем случае вы ничего не привязываете (например, извне компонента <app-component [favoriteColorControl]="something"> ), поэтому это не сработает.

Чтобы прослушать изменения реактивного элемента управления, используйте favoriteColorControl.valueChanges.subscribe(ctrlValue=>doSomethingWithIt)