Please refer to complete code here at stackblitz
When modify the first columnm dropdown to Model, it's observed that the 3rd column show list of models.
click on add row button --> for second row, modify the first column dropdown to System --> observed that the third column dropdown for the second row changed to system list too. However, it also modifies the third col of the other rows too . is there a way that I can modify only the third column of the second row ?
So the formControlName is the same in the ngFor loop, and I would like to watch the changes in the formControl and update the third column dropdown values only for that row (not all rows)
At stackblitz
do you know why when choose 'contains' option in the second column, the third column is showing Object object. Would prefer a blank input value.
do you also know how to show the default value for the input box, i.e. would like to show the first item from every dropdown list when the page first load / when add a new row.
<form class="form" [formGroup]="form" noValidate> <div *ngFor="let row of rows" class="rows"> <div> <select formControlName="getType"> <option *ngFor="let val of rootName" [value]="val"> {{ val }} </option> </select> </div> <div> <select formControlName="typeValues"> <option *ngFor="let val of type" [value]="val"> {{ val }} </option> </select> </div> <div *ngIf="getValues.length>0" > <select formControlName="onValues"> <option *ngFor="let val of getValues" [value]="val"> {{ val }} </option> </select> </div> <div class="row-button"> <button (click)="addRow()" [title]="'Add row'"> </button> </div> rows = [0]; this.form .get('typeValues') .valueChanges.pipe(takeUntil(this.ngUnsubscribe)) .subscribe(val => { this.setValues(); }); this.form .get('getType') .valueChanges.pipe(takeUntil(this.ngUnsubscribe)) .subscribe(val => { this.setValues(); }); } setValues() { const name = this.form.controls['getType'].value; const type = this.form.controls['tpeValues'].value; if (name != null && (type === 'is' || type === 'is not')) { if (name === 'Model') { this.getValues = this.getModelList; } else if (name === 'System'){ this.getValues = this.getSystemList; }else if (name === 'OS'){ this.getValues = this.getOSList; } } else { this.getValues = []; } } addRow() { this.formDirty = true; this.rows.push(this.rows.length); }
'