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>

Resources

• API Documentation
• Live Sample