如何创建一个简单的角度表单来获取包含刚刚更改的字段的对象
如何创建一个简单的角度表单来获取包含刚刚更改的字段的对象
提问于 2018-06-06 05:37:18
目前，我有一个类似这样的角度形式
<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 });我找不到任何这样的答案或外部教程，直接解决从表单中获取一组更改的问题。想知道实现这一点的角度是什么-最好的方法是避免不必要的样板文件，同时寻找任何合理的解决方案。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 11:06:02
多亏了Fateh Mohamed answer，我相信在建议的模板中使用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 = {};
}Stack Overflow用户
发布于 2018-06-06 06:07:13
这是一个反应式表单的解决方案，模型驱动表单的优点之一是它有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
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50709295
复制相关文章
相似问题