NG Dynamic Forms Prime NG UI
Installation
npm i @ng-dynamic-forms/ui-primeng -S
Import
@NgModule({
imports: [DynamicFormsPrimeNGUIModule]
})
export class AppModule {}
Usage
with DynamicPrimeNGFormComponent
:
<form [formGroup]="myFormGroup">
<dynamic-primeng-form [group]="myFormGroup"
[model]="myFormModel"></dynamic-primeng-form>
</form>
with DynamicPrimeNGFormControlComponent
:
<form [formGroup]="myFormGroup">
<dynamic-primeng-form-control *ngFor="let controlModel of myFormModel"
[group]="myFormGroup"
[model]="controlModel"></dynamic-primeng-form-control>
</form>
Form Controls
Control | Model | Required Property |
---|---|---|
AutoComplete | DynamicInputModel |
list |
Calendar |
DynamicDatePickerModel , DynamicTimePickerModel
|
– |
Checkbox | DynamicCheckboxModel |
– |
Chips | DynamicInputModel |
multiple: true |
ColorPicker | DynamicColorPickerModel |
– |
Dropdown | DynamicSelectModel |
– |
Editor | DynamicEditorModel |
– |
InputMask | DynamicInputModel |
mask |
InputSwitch | DynamicSwitchModel |
– |
InputText | DynamicInputModel |
– |
InputTextArea | DynamicTextAreaModel |
– |
MultiSelect | DynamicSelectModel |
multiple: true |
Radio Group | DynamicRadioGroupModel |
– |
Rating | DynamicRatingModel |
– |
Slider | DynamicSliderModel |
– |
Spinner | DynamicInputModel |
inputType: "number" |
Custom UI Events
<form [formGroup]="myFormGroup">
<dynamic-primeng-form [group]="myFormGroup"
[model]="myFormModel"
(pEvent)="onPEvent($event)"></dynamic-primeng-form>
</form>