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

Question

В настоящее время у меня есть угловая форма, такая как

<form>
    Name: <input name="name" [(ngModel)]="data.name"><br>
    Age: <input name="age" [(ngModel)]="data.age"><br>
    City: <input name="city" [(ngModel)]="data.city"><br>
    <button (click)='update()'>
</form>

После обновления я бы хотел иметь объект, содержащий только что измененные поля.Просто для быстрого и грязного решения я достиг своей потребности, используя Proxy, который выглядит более или менее как ниже (с присвоением компоненту data равным changeTracker.proxy):

class ChangeTracker {
    proxy;
    changed;
    constructor(initialTarget = {}) {
        this.changed = {};
        this.proxy = new Proxy(initialTarget, {
            get(target, key) {
                return target[key];
            },
            set(target, key, val) {
                target[key] = val;
                this.changed[key] = val;
                return true;   
            }
        });
    }
}

Так что в конце концов я могу сделатьт. е. REST PUT

http.put('/some/api/type', { objectId, ...changeTracker.changed });

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

Answer 1

Благодаря ответу Фатеха Мохамеда Я убедился в не столь многословном способе использования FormBuilder с предложенным шаблоном

<form id="personFormId" [formGroup]="personForm">
  Name: <input name="name" formControlName="nameControl"><br>
  Age: <input name="age" formControlName="ageControl"><br>
  City: <input name="city" formControlName="cityControl"><br>
  <button (click)='update()'>
</form>

и достижении главной цели - сборавсе изменения (и только изменения) в один объект.Помните, что компонент должен implements OnInit и ниже все еще является упрощенной ключевой частью решения.

ngOnInit() {
    this.changedData = {};
    this.form = this.formBuilder.group({
        name: [''],
        age: [''],
        city: ['']
    });

    // for ngrx < 6.x mergeMap should be used directly without a pipe
    from(Object.entries<AbstractControl>(this.form.controls))
        .pipe(mergeMap(([key, control]) =>
            control.valueChanges.map(value => ({ [key]: value }))))
        .subscribe(change => {
            this.changedData = {
                ...this.changedData,
                ...change
            }
        });
}

setFormData(data) {
    this.form.patchValue(data);
    this.changedData = {};
}

update() {
    http.put('/some/api/type', { id, ...this.changedData });
    this.changedData = {};
}

Answer 2

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

<form id="personFormId" [formGroup]="personForm">
  Name: <input name="name" formControlName="nameControl"><br>
  Age: <input name="age" formControlName="ageControl"><br>
  City: <input name="city" formControlName="cityControl"><br>
  <button (click)='update()'>
</form>

ts file

public personForm: FormGroup;
constructor(private router: Router, private _fb: FormBuilder) { }
ngOnInit() {
   this.personForm= this._fb.group({
     nameControl: ['', [<any>Validators.required]],
     ageControl: ['', [<any>Validators.required]],
     cityControl: ['', [<any>Validators.required]]
   });

   this.onFormChanges();
  }

form.valueChanges вернет наблюдаемое

 onFormChanges() {
     this.personForm.valueChanges.distinct().subscribe(val => {
          // do your control here
        });
  }