CODEWITHSUNDEEP
angularangular2-ngmodel
amar deep
amar deep

Reputation: 121

ngModel not updating in *ngFor Angular 4

ngModel for input box is not updating when I create input boxes by clicking on add button. Input boxes are populating. But when I change values, respective box values are updating in input box, but not updating in interpolated value( component ) Here is the view code: 

<div class=" dailyrep-div">  
    {{ settings_notification.thirtydreport_monthly.thirtydreport_monthly_time[i] | json }}
    <div class="d-inline-block inputwi140 marg-right15 marg-bottom15" *ngFor="let t of settings_notification.thirtydreport_monthly.thirtydreport_monthly_time; let i=index ; trackBy:trackByIndex " >
        <div class="input-group  marg-right15">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="la la-clock-o"></i>
                </span>
            </div>
            <input class="form-control m-input m_timepicker" readonly  type="text" value="{{t.timeValue}}" [(ngModel)] = "settings_notification.thirtydreport_monthly.thirtydreport_monthly_time[i]"  > 
            <button *ngIf=" i != 0 " class="align-top btn btn-danger m-btn m-btn--icon m-btn--icon-only" (click)="delete_thirtyDays_Report_monthly_index(i)" ><i class="la la-remove"></i></button>
        </div>     
    </div>     
    <button *ngIf="settings_notification.thirtydreport_monthly.thirtydreport_monthly_time.length <=5 " class="align-top addbtn btn btn-success" (click)="add_thirtyDays_Report_monthly()"  ><i class="la la-plus"></i>
    Add</button>
</div>

Here is my component code : 

trackByIndex(index: number, value: number) {
    return index;
  }   

  add_thirtyDays_Report_daily() {

    this.settings_notification.thirtydreport_daily.thirtydreport_daily_time.push({ timeValue: '12:42' });
    this.bindTimePickers();
}   

delete_thirtyDays_Report_daily_index(id) {
    console.log("delete option is: " + id);
    this.settings_notification.thirtydreport_daily.thirtydreport_daily_time.splice(id, 1);

}

Upvotes: 0

Views: 1985

Answers (1)

Manzur Khan
Manzur Khan

Reputation: 2486

You are binding a value to an object

this.settings.report.thirtydreport_monthly_time.push({ timeValue: '12:42' });

thirtydreport_monthly_time is a an array with object { timeValue: 'time' }

You need to bind with respective pattern in your html

[(ngModel)]="settings.report_monthly.thirtydreport_monthly_time[i]['timeValue']

Upvotes: 1

Related Questions