NG Dynamic Forms Kendo UI
Installation
npm i @ng-dynamic-forms/ui-kendo -S
Import
@NgModule({
imports: [DynamicFormsKendoUIModule]
})
export class AppModule {}
Usage
with DynamicKendoFormComponent
:
<form [formGroup]="myFormGroup">
<dynamic-kendo-form [group]="myFormGroup"
[model]="myFormModel"></dynamic-kendo-form>
</form>
with DynamicKendoFormControlComponent
:
<form [formGroup]="myFormGroup">
<dynamic-kendo-form-control *ngFor="let controlModel of myFormModel"
[group]="myFormGroup"
[model]="controlModel"></dynamic-kendo-form-control>
</form>
Form Controls
Control | Model | Required Property |
---|---|---|
AutoComplete | DynamicInputModel |
list |
Calendar | DynamicDatepickerModel |
inline: true |
Checkbox | DynamicCheckboxModel |
– |
Checkbox Group | DynamicCheckboxGroupModel |
– |
DateInput | DynamicInputModel |
inputType: "date" |
DatePicker | DynamicDatepickerModel |
– |
DropDownList | DynamicSelectModel |
– |
MaskedTextBox | DynamicInputModel |
mask |
MultiSelect | DynamicSelectModel |
multiple: true |
NumericTextBox | DynamicInputModel |
inputType: "number" |
Radio Button | DynamicRadioGroupModel |
– |
Slider | DynamicSliderModel |
– |
Switch | DynamicSwitchModel |
– |
TextArea | DynamicTextAreaModel |
– |
TextBox | DynamicInputModel |
– |
TimePicker | DynamicTimePickerModel |
– |
Upload | DynamicFileUploadModel |
– |
Custom UI Events
<form [formGroup]="myFormGroup">
<dynamic-kendo-form [group]="myFormGroup"
[model]="myFormModel"
(kendoEvent)="onKendoEvent($event)"></dynamic-kendo-form>
</form>