NG Dynamic Forms Kendo UI
Installation
npm i @ss-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>