Angular populate reactive form with get request in component

Question

I am having trouble creating an update component that reads the passed in id from the url, makes a get request, and populates a reactive form. I can confirm that the get request is returning what it should in the network tab of the browser.

In my service:

productUrl= 'http://localhost:8080/api/products';

  getProduct(id: number): Observable<Product> {
    const url = `${this.productUrl}/${id}`;
    return this.http.get<Product>(url);
  }

In my component:

  product: Product;

  productForm= this.fb.group({
    name: ['', Validators.required],
    price: ['', Validators.required]
  });

  ngOnInit() {
    this.getProduct();
    console.log(this.product);

    this.productForm.controls['name'].setValue(this.product.name);
    this.productForm.controls['price'].setValue(this.product.price);
  }

  getProduct(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.productService.getProduct(id)
      .subscribe(product=> this.product = product);
  }

Answer 1

I think you are setting the from before the data is come form server so you should set the form after data come form server as follows:

    product: Product;

      productForm= this.fb.group({
        name: ['', Validators.required],
        price: ['', Validators.required]
      });

      ngOnInit() {
        this.getProduct();

      }

      getProduct(): void {
        const id = +this.route.snapshot.paramMap.get('id');
        this.productService.getProduct(id)
          .subscribe(product=> {
           this.product = product;
           console.log(this.product);

           this.productForm.controls['name'].setValue(this.product.name);
           this.productForm.controls['price'].setValue(this.product.price);
         }
       );
      }

Answer 2

The problem is you are setting the data to form before it comes from the backend, (subscribe is asynchronous, which means the setvalue functions will execute while the subscribe function is in the process )the best way to do is to trigger the setValue/patch function when the data has arrived from the backend like this

getProduct(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.productService.getProduct(id)
      .subscribe(product=> {
       this.product = product;
       console.log(this.product);
       this.productForm.patchValue({
price: this.product.price
name: this.product.name
});     
     }
   );
  }

Answer 3

you can pathValue wth the value

    this.productService.getProduct(id)
      .subscribe(product=> { 
                 this.product = product;
                 if (this.productForm) {
                     this.productForm.patchValue(this.product); 
                     //  this.productForm.patchValue(this.product, {emitEvent: false}); if you don't want valueChange on form be fired 

                 }
                });