Trying to pass the selected value from select to a function, n amount of times in an array

I am trying to create a dynamic table where the user can select the amount of rows. Each row has 2 dropdowns with 1-10 to choose from. Each time the user selects a number from the dropdown I want it to pass to a function in the TS file to do stuff. The problem I am having is I am trying to use ngModel to pass the data back to the TS file. When I do this though every dropdown that was created in the dynamic table obviously sets itself to that value. What is the best way to simply pass a value back to the TS file without the need for 2 way binding?

My HTML:

<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th style="text-align:center">blueFighter</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">redFighter</th>
</tr>
</thead>
<tbody class="tablerows">
<tr *ngFor="let round of rounds; index as i">
<td id="'redScore'+i" align="center">
<ng-select class="form-group"
style="width:50%"
[(ngModel)]="inputValueRed"
[items]="score"
(change)="updateRedScore($event, i, inputValueRed )"></ng-select>
</td>
<td align="center">i + 1</td>
<td id="'blueScore'+i" align="center">
<ng-select class="form-group"
style="width:50%"
[(ngModel)]="inputValueBlue"
[items]="score"
(change)="updateBlueScore($event, i, inputValueBlue)"></ng-select>
</td>
</tr>
<tr style="font-weight:bold">
<td>redScoreSum</td>
<td align="center">FINAL SCORE</td>
<td>blueScoreSum</td>
</tr>
</tbody>


TS:

export class MyScorecardComponent implements OnInit {
redFighter: String;
blueFighter: String;
numOfRounds: number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
score: number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
redRoundByRound: number;
blueRoundByRound: number;
redRoundScore: number;
selectedRounds: number = 1;
rounds: number;
inputValueBlue: number;
inputValueRed: number;
blueScoreSum: number;
redScoreSum: number;
tableArray: any;



createCardClick()
this.rounds = Array(this.selectedRounds).fill(0).map((x, i) => i);



updateBlueScore($event, index, passedscore)
this.blueRoundByRound[index] = passedscore;


updateRedScore($event, index, passedscore)
this.redRoundByRound[index] = passedscore;



Part of the HTML is missing but that part works fine.

2 Answers
2

You don't need to bind the select to a model.
Try

<ng-select class="form-group"
style="width:50%"
#select="ngModel"
ngModel
[items]="score"
(change)="updateBlueScore($event, i, select.value)"></ng-select>


So, just give the ng-select a name (with the '#' in front of), add the ngModel directive and pass it's value as a parameter.

You should use FormArray class (reactive design). Here is pseudo code :

FormArray

ngOnInit()
this.myForm = new FormGroup(

'rounds':new FormArray();




You can have a method like this the to add new row :

addRound()
const control = new FormControl(null, Validators.required);
(<FormArray>this.myForm.get('rounds')).push(control);



template file :

...
<tr *ngFor="let round of myForm.get('rounds').controls; index as i">
...
<ng-select [formControlName]="i" >
...


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.