Render Array values from another Array based on Dropdown value

Question

I'm working with Angular 8 and FormGroup, I got a little issue I can't fix, in my webpage I'm trying to render values inside a <select> based on another <select>.

Here's the JSON I recieve : JSON response

I'm trying to render "currencies" based on "ListPricelist"

Here's my HTML :

  <div  class="flex1 pl10">
   <select formControlName="pricelist" class="form-control" [ngClass]="{'is-invalid': submitted && 
      f.pricelist.errors}">
    <option value selected="selected">Select a pricelist</option>
    <option   name="pricelist_id" ngClass="pricelist_id"  *ngFor="let p of filter.ListPricelist; let i = index" id="pricelist_id" >{{i}}{{p.label}}</option>
  </select>

  <div *ngIf="submitted && f.pricelist.errors" class="invalid-feedback">
    <div *ngIf="f.pricelist.errors.required">Pricelist is required</div>
  </div>

  <select  formControlName="currency" class="form-control">
    <option value selected="selected">Select a currency</option>
    <option [value]="currency_id" *ngFor="let c of registerForm.value.pricelist.currencies" id="currency_id">{{c.code}}</option>
  </select>
</div>

But in my page it doesn't render and I can only select List Pricelist

Don't hesitate to tell me if you need the TypeScript file and thank's for the help in advance

EDIT : Here's my TS file

import {Component, Injectable, OnInit} from '@angular/core';
import {Form, FormBuilder, ReactiveFormsModule, FormGroup, Validators} from 
"@angular/forms";
import {HttpClient} from '@angular/common/http';
import {ActivatedRoute, Router} from '@angular/router';




 @Component({
   selector: 'app-project',
   templateUrl: './project.component.html',
   styleUrls: ['./project.component.scss'],
 })

 @Injectable({
   providedIn: 'root'
  })


 export class ProjectComponent implements OnInit {


   ngOnInit() {
    this.requiredFields()
    }

filter = JSON.parse(window.localStorage.getItem('filters'));
filterCurrency = this.filter;
currencies: Array<any>;
 params: {
  ListPricelist: Array<{
    currencies: Array<{
      id: number;
      code: string;
      }>
    }>;
  };

 get f() {
  return this.registerForm.controls;}

 requiredFields(){
   this.registerForm = this.formBuilder.group(
  {
    name: ['',[Validators.required]],
    country: ['',[Validators.required]],
    pricelist_id: [''],
    pricelist: ['',[Validators.required]],
    currency: ['',[Validators.required]],
    status: ['',[Validators.required]],
    tarif: ['',[Validators.required]],
    hauteur: ['',[Validators.required]],
    supp: ['',[Validators.required]],
    mainO: ['',[Validators.required]]
    }
  )
 }
  constructor(private httpClient: HttpClient,
           private activatedRoute: ActivatedRoute,
           private formBuilder: FormBuilder,
           private router: Router,
           ){}

  }

export interface getResponse {
  ListPricelist: Array<{
   currencies: Array<{
   id: number;
   code: string;
   }>
  }>;

 }

pls you show us you .ts file

Doflamingo19
– Doflamingo19

2019-11-26 13:49:41 +00:00
Commented Nov 26, 2019 at 13:49 — Doflamingo19
– Doflamingo19, Commented Nov 26, 2019 at 13:49
can you please add you .ts file code.

Utkarsh
– Utkarsh

2019-11-26 13:49:42 +00:00
Commented Nov 26, 2019 at 13:49 — Utkarsh
– Utkarsh, Commented Nov 26, 2019 at 13:49
I edited the post with it

Zephyr
– Zephyr

2019-11-26 14:08:33 +00:00
Commented Nov 26, 2019 at 14:08 — Zephyr
– Zephyr, Commented Nov 26, 2019 at 14:08

MoxxiManagarm · Accepted Answer · 2019-11-26 14:15:56Z

1

I reduced your example a little bit:

<div>
  <select (change)="selectedPriceListIndex = $event.target.value">
    <option value="-1" selected="selected">
      Select a pricelist
    </option>
    <option *ngFor="let p of filter.listPriceList; let i = index" [value]="i">
      {{ p.label }}
    </option>
  </select>

  <select>
    <option value selected="selected">
      Select a currency
    </option>
    <option *ngFor="let c of filter.listPriceList[selectedPriceListIndex]?.currencies">
      {{ c.code }}
    </option>
  </select>
</div>

See stackblitz: https://stackblitz.com/edit/angular-kj3l5a

answered Nov 26, 2019 at 14:15

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

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

3 Comments

Zephyr Over a year ago

Thank you alot, it work as expected, can you explain me a bit what I was doing wrong please ?

MoxxiManagarm Over a year ago

It's hard to say without a stackblitz. A wild guess: Your first option iteration should have [value]="p"

Zephyr Over a year ago

Oh alright I think I was trying to use only the index value from my ngFor but I wasn't storing it in [value] so the second select was rendering nothing, thank you!

Collectives™ on Stack Overflow

Render Array values from another Array based on Dropdown value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related