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>