Прослушайте изменения при обновлении объекта Angular

Question

У меня есть форма, которая обновляет объект, например, так:

компонент. html

<input type="text" [(ngModel)]="user.name" />
<input type="text" [(ngModel)]="user.surname" />
<input type="text" [(ngModel)]="user.age" />

component.ts

user = {
  name: null,
  surname: null,
  age: null
}

теперь в моем компоненте. html У меня есть кнопка сохранения, которая находится в дочернем компоненте

<app-save-btn [user]="user"></app-save-btn>

, а в компоненте app-save-btn я прослушиваю изменения, используя OnChanges

@Input() user: User;

userForCompare: User;

ngOnChanges() {
  if (!this.userForCompare) {
    this.userForCompare = {...this.user};
  }
  console.log(this.userForCompare, this.user);
}

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

теперь я знаю, что я могу создать отдельные переменные для хранения каждого значения, но у меня есть около 30 элементов поля, поэтому я не хочу менять свою реализацию на многое ...

любая помощь будет оценена

Answer 1

@Input свойство будет запускать функцию ngOnChanges только тогда, когда объект Input мутирует.

В вашем примере поля ввода изменяют каждое отдельное свойство в том же пользовательском объекте, пользователь объект для @Input всегда ссылается на один и тот же объект (даже если его дочернее имя свойства, имя и возраст изменены), поэтому ngOnChanges не будет срабатывать.

Следовательно, вы должны сделать this.user in component.ts соответствует новому пользовательскому объекту всякий раз, когда изменяется любое поле ввода.

Надеюсь, это поможет!

Answer 2

Я бы предложил создать FormGroup с Реактивными формами для управления вашими полями. Используя FormBuilder.group(), вы можете создать форму, содержащую каждую для свойства объекта User ... таким образом, вам нужно будет только передать form.value вашему дочернему компоненту.

Реактивная форма поддерживает чистоту модели данных, предоставляя ее в виде неизменной структуры данных. Каждый раз, когда происходит изменение формы, экземпляр FormControl не будет обновлять существующую модель данных, он будет возвращать новое состояние (новую модель данных).
https://www.ibrahima-ndaw.com/blog/5-reasons-to-use-reactive-form/

Вот живой пример StackBlitz с использованием приведенного ниже кода:
https://stackblitz.com/edit/angular-stackoverflow-60424523

example.component. html

<form [formGroup]="form">
  <input [formControlName]="'name'" />
  <input [formControlName]="'surname'" />
  <input [formControlName]="'age'" />
</form>
<app-save-btn [user]="form.value"></app-save-btn>

example.component.ts

import { Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup} from '@angular/forms';

@Component({ ... })
export class AppComponent implements OnInit {

  form: FormGroup;

  user: User = {
    name: 'Initial name',
    surname: 'Initial surname',
    age: 99
  };

  constructor(
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit() {
    this.form = this.formBuilder.group(this.user);
  }
}