我对用户添加和用户编辑使用相同的表单。如果用户已登录,我知道我正在编辑表单,如果用户未登录,我正在添加新用户。
我面临的问题是,当用户登录时,我必须查询后端 API 以获取用户数据以填写表单,因为 GET
请求是 async
在我获取数据之前已经创建了表单。这是我所拥有的:
ngOnInit() {
let userData = null;
if (this.userService.userId) { // user is logged in, query for data
this.http.get('http://localhost/api/user/get/' + this.userService.userId)
.subscribe(
(data) => {
userData = data.json();
},
(error) => {
}
);
}
//init form
this.form = new FormGroup({
id: new FormControl(userData ? userData.id : ''),
name: new FormControl(userData ? userData.name : '', Validators.required)
});
}
我想到的一个解决方案是在获取数据后在 get block 中复制 form init 但这似乎不是一个好的解决方案,尤其是当 form init 可以有很多字段时。
对于这种情况,什么是干净的解决方案?
最佳答案
您的问题的干净解决方案如下所示 -
ngOnInit() {
let userData = null;
//init form
this.form = new FormGroup({
id: new FormControl(userData ? userData.id : ''),
name: new FormControl(userData ? userData.name : '', Validators.required)
});
if (this.userService.userId) { // user is logged in, query for data
this.http.get('http://localhost/api/user/get/' + this.userService.userId)
.subscribe(
(data) => {
userData = data.json();
this.form.patchValue({
id: userData.id,
name: userData.name
})
},
(error) => {
}
);
}
}
注意这里 FormGroup
在发送 GET
请求之前被初始化。稍后 patchValue
用于将新值绑定(bind)到 formControlName
希望这对您有所帮助。
关于javascript - Angular2/4 在请求后填充表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44602420/