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

I did this one for something else but maybe it will help you stackblitz.com/edit/… also check routing setup — Xesenix
– Xesenix, Commented Jun 24, 2019 at 17:09
this.getProduct() is asynchronous. You can convert that observable to promise via .toPromise() and use async/await. Or add them into the subscribe. — penleychan
– penleychan, Commented Jun 24, 2019 at 17:12
@penleychan, NO. Blake must make the setValues INSIDE subscribe function. FutherMore Blake, you can do this.productForm.setValue(this.product) — Eliseo
– Eliseo, Commented Jun 24, 2019 at 19:09
@Eliseo, Why is that the only option he has to go with doing that? It is valid to do async await. — penleychan
– penleychan, Commented Jun 24, 2019 at 19:29
@penleychan I'm sorry, I feel that the way to express my comment was not the most appropriate. I want to say that, in my opinion, it is more natural to use the Observables and subscribe to them. Convert an Observable in Promise is a work around I do not think necessary (Angular work mostly using Observables, not Promise), but it's just an opinion. My apologies if you bothered my comment. — Eliseo
– Eliseo, Commented Jun 24, 2019 at 19:54

Faizal Hussain · Accepted Answer · 2019-06-24 17:27:47Z

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

answered Jun 24, 2019 at 17:27

Faizal Hussain

1,5812 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Debabrata Paul Chowdhury · Accepted Answer · 2019-06-24 17:13:00Z

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

Reza · Accepted Answer · 2019-06-24 17:11:14Z

0

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 

                 }
                });

answered Jun 24, 2019 at 17:11

Reza

20.1k18 gold badges102 silver badges178 bronze badges

Collectives™ on Stack Overflow

Angular populate reactive form with get request in component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related