javascript - Angular2/4 在请求后填充表单

Question

我对用户添加和用户编辑使用相同的表单。如果用户已登录，我知道我正在编辑表单，如果用户未登录，我正在添加新用户。

我面临的问题是，当用户登录时，我必须查询后端 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 可以有很多字段时。

对于这种情况，什么是干净的解决方案？

Answer 1

您的问题的干净解决方案如下所示 -

 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

希望这对您有所帮助。