0

I have a drop-down menu and a form with dynamic textbox.

This is my dropdown menu, which on change I store them to firstYear and secondYear

<select class="form-control" id="year" name="year" [(ngModel)]="yearRange" (change)="onFilter($event)">
    <option value='2018-2019'>2018-2019</option>
    <option value='2017-2018'>2017-2018</option>
    <option value='2016-2017'>2016-2017</option>
</select>


public updateForm: NgForm;
    public value_01: any; public value_02: any; public value_03: any;

onFilter(data: any) {
  ....
  yearSplit =  this.yearRange.split("-");
  this.firstYear = yearSplit[0];
  this.secondYear = yearSplit[1];
}

I want to post the form with key as countryname_year_1 for lets say country selected is "India", year is "2018" and month is january. I have tried following code. I am working here:

stackblitz.com/edit/angular-mcnxrq

<form name="updateForm" #updateForm="ngForm" (ngSubmit)="submit(updateForm.value)" *ngIf="showEdit" >
    <div class="forex">
        <table class="table table-bordered">     
            <tr>
                <td>{{firstYear}}</td>
                <td><input type="number" step="any" class="form-control" id="{{labelCountry}}_{{firstYear}}_01" name="{{labelCountry}}_{{firstYear}}_01" [(ngModel)]="value_01"></td>
                <td><input type="number" step="any" class="form-control" id="{{labelCountry}}_{{firstYear}}_02" name="{{labelCountry}}_{{firstYear}}_02" [(ngModel)]="value_02"></td>

I am not sure how to fix this issue.

Can anybody please help me?

Thank You.

S S
  • 1,443
  • 2
  • 12
  • 42

1 Answers1

0

your using same property for different rows, instead of that change property to Object then use it in template.

do some changes in your template like 

selectedYears: Object = {};

onFilter(data: any) {
  ....
  yearSplit =  this.yearRange.split("-");
  this.selectedYears[yearSplit[0]]= yearSplit[1];

  //  this way you don't need to set these to properties
  //  this.firstYear = yearSplit[0];
  //  this.secondYear = yearSplit[1];
}

genarateObjectKeys(years: any) {
  return Object.keys(years);
}

in template

<tr *ngFor="let firstyear of genarateObjectKeys(selectedYears)">
    <td>{{firstYear}}</td>
    <td><input type="number" step="any" class="form-control" id="{{labelCountry}}_{{firstYear}}_01" name="{{labelCountry}}_{{firstYear}}_01" [(ngModel)]="value_01"></td>
    <td><input type="number" step="any" class="form-control" id="{{labelCountry}}_{{firstYear}}_02" name="{{labelCountry}}_{{firstYear}}_02" [(ngModel)]="value_02"></td>
</tr>

you can get the secondyear in the template as selectedYears[firstyear]. For more details about using *ngFor in the table refer here and this

Ganesh
  • 5,808
  • 2
  • 21
  • 41
  • inside genarateObjectKeys() i get {2016: "2017", 2017: "2018", 2018: "2019"} multiple times for the year selected 2018-2019 – S S Jan 06 '19 at 10:15
  • years = {2016: "2017", 2017: "2018", 2018: "2019"}; this what you need to get inside `genarateObjectKeys()`. and it will return [2016,2017,2018] to template – Ganesh Jan 06 '19 at 11:10
  • https://stackblitz.com/edit/angular-mcnxrq can you please check here. i have 2 dropdown select country and year range then value must pass as country_firstYear_01 for if 2018 year is selected and text field january – S S Jan 06 '19 at 13:07
  • Yes as key then it's associated value – S S Jan 06 '19 at 13:59
  • see this https://stackblitz.com/edit/angular-nb2qcf?file=src/app/test/test.component.ts it's not done yet but i think it will be useful to you – Ganesh Jan 07 '19 at 05:58