1

I have an array of data which is retrieved from a REST API. The user should be able to manipulate the data. The problem is that when several rows are shown (i.e. data1 array's length is larger than 1), it is the same date in all the #ds input elements. The same goes for all the #de input elements. I have checked the data in the array called data1, and there is no duplicates of dates, so the problem lies within the html. Since the input element that does not use ngbDatepicker works fine, the problem is related to the ngbDatePicker somehow, but I don't know how to solve it. 

    <form class="form">
    <div class="row ml-5 mr-5 mb-2" *ngFor="let dataRow of data1; let in=index;">
        <div class="col-12 col-sm mb-2 mb-sm-0">
            <input class="form-control form-control-sm" #inpValue value="{{dataRow.fldValue}}" />
        </div>
        <div class="col-12 col-sm mb-2 mb-sm-0">
            <div class="input-group">
                <input class="form-control form-control-sm" placeholder="Start Date" name="ds"
                        [(ngModel)]="data1[in].inputStartDate" ngbDatepicker #ds="ngbDatepicker"/>
                <button class="input-group-addon" (click)="ds.toggle()" type="button">
                    <img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
                </button>
            </div>
        </div>
        <div class="col-12 col-sm mb-2 mb-sm-0">
            <div class="input-group">
                <input class="form-control form-control-sm" placeholder="End Date" name="de"
                        [(ngModel)]="data1[in].inputEndDate" ngbDatepicker #de="ngbDatepicker" />
                <button class="input-group-addon" (click)="de.toggle()" type="button">
                    <img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
                </button>
            </div>
        </div>
        <div class="col-12 col-sm mb-2 mb-sm-0">
            <button class="btn btn-primary btn-block w-100" (click)="saveBtn(dataRow, inpValue.value, dataRow.fldRowID)">Save</button>
        </div>
    </div>
</form>

This image illustrate the problem: Shows identical dates, even though the uppermost datarow contains the start-date 1900-01-01 and end-date 2018-02-11

PravinS
  • 2,640
  • 3
  • 21
  • 25
Tompish
  • 11
  • 4
  • I am facing also the same issue. Did you found a solution? – FindOutIslamNow Jul 09 '18 at 08:20
  • You are using the same template reference #de for both (all) datepicker elements within the *ngFor structural directive. You have the same DOM element/object instantiated for both items. You cannot have dynamically defined template references like #de{{index}} but you should be able to put your element inside another structural directive like ngIf. So [ngFor [ngIf [datepicker]]] This way the ngIf creates a new template scope and templates defined within should not be available on the outside => avoid clashing the two #de template references. Unfortunately it doesn't work, but explore the optio – Tiha Jun 14 '19 at 11:31
  • Have you considered the solution described in https://stackoverflow.com/questions/45004293/multiple-datepicker-in-one-form-angular2-with-difference-component ? – Niz May 21 '20 at 09:24

0 Answers0