1

I have a problem when using "ngbDatepicker" in form array. The date input cannot be opened. I think because the toggle() function cannot be called correctly.

I have tried creating toggleDate function and call toggle() by using this code

toggleDate(event){
  var f = new Function(event+'.toggle()');  
  f();
}

I have also put 

(click)="this[toggle]()"

in my html input date but it doesn't work

This is my HTML Code

<div formArrayName="appntTimes" *ngFor="let appnts of 
   inputForm.controls.appntTimes?.value; let i = index">
   <div [formGroupName]="i">
    <div class="form-group row">
      <label class="col-2 control-label col-form-label">Date</label>
        <div class="col-7">
           <div class="input-group date" >
             <input class="form-control m-b" formControlName="annceDate1" id="{{'annceDate1'+i}}" name="{{'annceDate1'+i}}" ngbDatepicker #annceDate1{{i}}="ngbDatepicker"
              placeholder="DD/MM/YYYY" (click)="toggleDate($event)"/>
             <span class="input-group-addon" >
                  <i class="fa fa-calendar"></i>
             </span>
            </div>
           </div>
         </div>
   </div>
</div>

I have used multiple datepickers in my page and it worked perfectly but when I put it in ngFor loop and use index to define it’s name and id, It doesn’t work.

user3891474
  • 23
  • 4
  • Just to clarify, your question is how you can know witch datepicker to open since you have multiple inputs and multiple datepickers? – Mendy Aug 20 '19 at 01:30
  • Yes Mendy. But I have used multiple datepickers in my page and it works perfectly but when I put it in ngFor loop and use index to define it’s name, It doesn’t work so my question is how to use it in for loop. – user3891474 Aug 20 '19 at 02:21
  • 1
    you needn't change the reference variable or the toogle, just ``, a simple example https://stackblitz.com/edit/angular-cysmkd?file=src%2Fstyles.css – Eliseo Aug 20 '19 at 06:39
  • Thank you so much @Eliseo it works. My issue has been resolved. – user3891474 Aug 21 '19 at 02:52

0 Answers0