allianz / ng-aquila

Angular UI Component library for the Open Insurance Platform
https://allianz.github.io/ng-aquila/
Other
205 stars 32 forks source link

dynamic form with multiple datepicker component #65

Open fajarainul opened 3 weeks ago

fajarainul commented 3 weeks ago

Hi guys, so currently I work with dynamic form which will generate component based on API response. Is it possible to generate multiple datepicker component. Like

@for (data of item.data; track data.value){
                          <nx-formfield #item.label label={{item.label}}>
                              <input
                                  nxDatefield
                                  nxInput
                                  [datepicker]="data.controlName"
                                  formControlName={{item.controlName}}
                              />
                              <span nxFormfieldHint>MM/DD/YYYY</span>
                              <nx-datepicker-toggle 
                                  [for]="data.controlName"
                                  nxFormfieldSuffix>
                              </nx-datepicker-toggle>
                              <nx-datepicker #data.controlName></nx-datepicker>
                          </nx-formfield>
                      }

Thanks in advance!

Phil147 commented 3 weeks ago

Hi @fajarainul well have you run it and ran into any problems? :) The only problem I see is the template variable #item.label AFAIK you cannot create dynamic names, but the variable will be scoped to the template it is used. So you can just use #formfield or #datepicker and this will only live inside this specific template of a single iteration of your loop.