Angular 6 - Form - Select Option not updating properly

Question

Could someone tell me, why select option not getting updated properly. but console am getting proper value whatever that i changed.

Have form with select option and save button. whenever i change, its show [0][0] - [0][0] in my view. pls the complete code is here

form name="form" (ngSubmit)="onSubmit()" #f="ngForm" novalidate>
    <div class="form-group" contenteditable="false" *ngFor="let val of mockData">
        <p>{{val.description}}</p>
        <label for="sort" class="col-sm-2 control-label"> select current type </label>
        <div class="col-sm-4">
            <select [(ngModel)]="saveData.selectedValue1" (change)="currChanged()" name="selectedValue1" >
                <option *ngFor='let d of dropDownString' [value]="d.currencyType">
{{d.currencyType}}
</option>
            </select>
        </div>
        <label for="sort" class="col-sm-2 control-label"> select max rate </label>
        <div class="col-sm-4">
            <select [(ngModel)]="saveData.selectedValue2" (change)="rateChanged()" name="selectedValue2" #selectedValue2 = "ngModel">
                <option *ngFor='let c of currencyValue' [value]="c.maxRate">
{{c.maxRate}}
</option>
            </select>
        </div>
    </div>
    <button>Save</button>
</form>

kindly where am making fault and what have to change.

Note: i just want save select option values separately and should description without any changes from get response. for time being am using some hard coded data.

thanks in advance

Answer 1

In your replace functions you need to replace the placeholders with this.saveData.selectedValue1 or this.saveData.selectedValue2. this.saveData is bound to the values of both select elements via ngModel.

Example:

data.description = data.description.replace(this.prevSelectValue1, this.saveData.selectedValue1);

You also need to update your previously selected value accordingly:

this.prevSelectValue1 = this.saveData.selectedValue1;  

Stackblitz here.