ng2 Dynamic Forms Prime NG UI

Installation

npm install @ng2-dynamic-forms/ui-primeng -S

Import

@NgModule({

    imports: [
        // ...
        ReactiveFormsModule,
        DynamicFormsCoreModule.forRoot(),
        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 | | 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" |

Sample

Live Demo