1

In my Angular form while moving from one form to another the formControl can not rendering it's particular value instead it is displaying last visited form values.

Eg. If I have visited product_id = 1 and there the formControl('productValue') having values like 10, 11, 12. Now I am moving to product_id = 2 so at that time it should display product_id = 2 related values (45, 89, 63) but it renders the previously visited product_id = 1 values i.e 10, 11, 12

  import { Injectable } from "@angular/core";
  import { FormGroup, FormBuilder, FormControl, FormArray } from "@angular/forms";
  @Injectable({
    providedIn: "root",
  })
    
  export class ProductService {
    public productForm: FormGroup = this.fb.group({
      inventoryCollection: new FormArray([
        new FormGroup({ productStatus: new FormControl(""), productValue: new FormControl("") })
      ])
    });
    
    getInventoryData(productId) {
      let controlsCollection = <FormArray>this.productForm.get('dataCollection')
      this.getCollectionById(productId).subscribe((res: any) => {
        res.forEach(data => {
          controlsCollection.push(new FormGroup({
            productStatus: new FormControl(data.status)
            productValue: new FormControl(data.productValue)
          }))
        });
      })
    }
  }

Component in which calling getInventoryData() method

export class ProductComponent implements OnInit {
    constructure(private router: Router) {
        this.route.parent.params.subscribe(params => { 
            this.params = { id: Number(params['id']) }
  })}

    ngOnInit() { 
        this.productService.getInventoryData(this.params.id)
    }
}

HTML form is as below:

  <form [formGroup]="productService.productForm">
    <div formArrayName="dataCollection">
      <div [formGroupName]="i" *ngFor="let element of details; let i = index">
        <input matInput type="text" formControlName="productValue">
        <mat-select formControlName="productStatus" value="{{productService.details[i].productStatus === '0' ? 'Active' : 'Inactive'}}">
          <mat-option value="AC">Active</mat-option>
          <mat-option value="IA">Inactive</mat-option>
        </mat-select>
      </div>
    </div>
  </form>

P.S: I have visited product_id = 1" and "moving to product_id = 2" means is a router navigation.

 http://localhost:4500/product/1/collection i.e product_id = 1
 http://localhost:4500/product/2/collection i.e product_id = 2
TMA
  • 1,419
  • 2
  • 22
  • 49
  • 1
    post the ts where you are calling getInventoryData() method . – Sandeep Modak Oct 16 '20 at 10:29
  • What if you move to product_id = 3? Do you still get product_id = 1's values? You haven't provided how you attempt to load ids after visiting different url – Gynteniuxas Oct 16 '20 at 10:29
  • yes correct.. @gytis-tg if i move to product_id = 3 then also getting product_id = 1's values – TMA Oct 16 '20 at 10:32
  • 1
    Well, then it means you're not correctly updating values when navigating to other page, but with current code I can't tell what's wrong – Gynteniuxas Oct 16 '20 at 10:35
  • @GytisTG: The navigation values are rendering properly, but the thing is that by visiting to the other page the lastly visited page's formControl not going to destroy so that when move to the other page those values also pushed into another page's formControl values. – TMA Oct 16 '20 at 10:49
  • Ok, so I see that the problem is you are creating form on `ngOnInit` but this doesn't trigger when you're navigating to a different page, it only renders and the first landed page. You'll need to re-create form by listening for route changes. – Gynteniuxas Oct 16 '20 at 10:53
  • So, you mean i need to call it into `constructor()` method ? – TMA Oct 16 '20 at 11:04
  • Most likely you'll just need to move `this.productService.getInventoryData(this.params.id)` to where `this.params = { id: Number(params['id']) }` is and `ngOnInit` in this case is not even needed (for now, at least). – Gynteniuxas Oct 16 '20 at 11:06
  • OKay, so i have updated like this `this.route.parent.params.subscribe(params => { this.params = { id: Number(params['id']) }; this.productService.getInventoryData(this.params.id) });` ...but getting the same result. – TMA Oct 16 '20 at 11:11
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223150/discussion-between-gytis-tg-and-tma). – Gynteniuxas Oct 16 '20 at 11:14

0 Answers0