10.0.9 • Published 7 years ago
@wf-dynamic-forms/ui-primeng v10.0.9
NG Dynamic Forms Prime NG UI
Installation
npm i @wf-dynamic-forms/ui-primeng -SImport
@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>