Angular2/4 在请求后填充表单

Question

I am using the same form for both user adding and user editing. If a user is logged in I know that I'm editing the form and if a user is not logged in I'm adding a new user.

The problem I'm facing is that when user is logged in I have to query the backend API for user data to fill the form and because the GET request is async the form is already created before i get the data. Here is what I have:

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

}

One solution I thought of is to duplicate the form init in the get block after I get the data but this doesn't seem like a good solution, especially when the form init can have a lot of fields.

What would be a clean solution for this case?

Answer 1

A clean solution to your problem would look like this -

 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) => {

          }
        );
    }
  }

Notice here that the FormGroup is initialized before the GET request is sent. And later patchValue is used to bind the new values to the formControlName

Hope this helps.