javascript - 如何创建一个简单的 Angular 表单来获取包含刚刚更改的字段的对象

Question

目前我有一个像

这样的 Angular 形式

<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 });

我无法找到任何直接解决从表单获取更改集的问题的答案或外部教程。想知道实现这一目标的 Angular 方法是什么 - 最好的方法是避免不必要的样板文件，同时寻找任何合理的解决方案。

Answer 1

这是一个响应式(Reactive)表单的解决方案，模型驱动表单的好处之一是它具有 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 文件

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
        });
  }