Kendo DatePicker / Dropdownlist with dynamic name Attribute in Template Driven Form

[Katharina]

Hi,

I have a template driven form and use some kendo elements (e.g. DatePicker or Dropdownlist). The error is the same for all the Kendo widgets, I'll describe it here only for the DatePicker:

In my component 1, there's my form and I call my sub-component where the datepicker is in it:

<form #form="ngForm" novalidate="novalidate">

<my-datepicker [(property)]="myProperty" [parentctrl]="this"></my-datepicker>

...

</form>

 

In my sub-component there is the kendo DatePicker:

<kendo-datepicker #datePicker
                      calendarType="classic"
                      [attr.name]="datePickerName"
                      [(ngModel)]="dateVal"
                      [format]="'dd.MM.yyyy'"
                      (ngModelChange)="datePickerChanged()"></kendo-datepicker>

The name of the DatePicker is set dynamically via [attr.name]. The value is inside the component:

@Component({
  selector: 'my-datepicker',
  templateUrl: './my-datepicker.component.html',
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
  styleUrls: ['./my-datetimepicker.component.less']
})
export class MyDatepickerComponent {

public datePickerName: string = "myName";

}

When I check this.parentctrl.form.form.controls[this.datePickerName], there is no form control for my datepicker. Also, when I replace it with <kendo-datepicker name="{{datePickerName}}". This problem only exists, when I set the DatePicker name dynamically. When I use a static name (<kendo-datepicker name="myName"), I can find the datePicker in the form.controls array.

I need access to the form.controls array for validation purposes, but I need to set the name attribute dynamically from component code.

With normal html5 elements (like input) it works. But with Kendo elements (DatePicker, Dropdownlistm ...) there is the problem in the form.controls array.

Do you have any idea how to "refresh" the form controls array after setting the name dynamically?

Thanks,

Katharina

[Martin Bechev]

Hello Katharina,

Thank you for the provided details.

Try binding the name property, surrounded by square brackets, like:

<kendo-datepicker #datePicker
                      calendarType="classic"
                      [name]="datePickerName"
                      [(ngModel)]="dateVal"
                      [format]="'dd.MM.yyyy'"
                      (ngModelChange)="datePickerChanged()"></kendo-datepicker>

Thus the Angular will evaluate the right-hand side of the assignment as a dynamic expression.

Let me know how it goes.

Regards,
Martin
Progress Telerik