@ng-dynamic-forms/ui-material

NG Dynamic Forms Material UI

Installation

npm i @ng-dynamic-forms/ui-material -S

Import

@NgModule({

    imports: [DynamicFormsMaterialUIModule]
})

export class AppModule {}

Usage

with DynamicMaterialFormComponent:

<form [formGroup]="myFormGroup">

    <dynamic-material-form [group]="myFormGroup"
                           [model]="myFormModel"></dynamic-material-form>
</form>

with DynamicMaterialFormControlComponent:

<form [formGroup]="myFormGroup">

    <dynamic-material-form-control *ngFor="let controlModel of myFormModel"
                                   [group]="myFormGroup"
                                   [model]="controlModel"></dynamic-material-form-control>
</form>

Form Controls

Control	Model	Required Property
Autocomplete	DynamicInputModel	list
Checkbox	DynamicCheckboxModel	–
Checkbox Group	DynamicCheckboxGroupModel	–
Chips	DynamicInputModel	multiple: true
Datepicker	DynamicDatePickerModel	–
Input	DynamicInputModel	–
Radio Group	DynamicRadioGroupModel	–
Select	DynamicSelectModel	–
Slider	DynamicSliderModel	–
SlideToggle	DynamicSwitchModel	–
Textarea	DynamicTextAreaModel	–

Custom UI Events

<form [formGroup]="myFormGroup">

    <dynamic-material-form [group]="myFormGroup"
                           [model]="myFormModel"
                           (matEvent)="onMatEvent($event)"></dynamic-material-form>
</form>

Resources

• API Documentation
• Live Sample

Changelog

10.0.0

Breaking Changes

• Due to performance reasons NG Dynamic Forms from now on makes use of ChangeDetectionStrategy.OnPush under the hood. Whenever modifying a DynamicFormControlModel (except for value and disabled setters) that means you need to manually trigger change detection by simply calling detectChanges() on DynamicFormService.

Please also read the new chapter on updating form controls.

BEFORE:

// Immeditialy triggers UI update
myModel.value = "New Value";
myModel.disabled = true;
myModel.label = "New Label";

AFTER:

// This still works
myModel.value = "New Value";
myModel.disabled = true;

// This doesn't work automatically any more
myModel.label = "New Label";

// You need to manually trigger change detection
this.formService.detectChanges();

---

• findModelById<T> and findControlByModel<T> now use a type variable so you don't need to cast its return value any more.
• DISABLED_MATCHER has been renamed to DISABLED_MATCHER_PROVIDER
• HIDDEN_MATCHER has been renamed to HIDDEN_MATCHER_PROVIDER
• REQUIRED_MATCHER has been renamed to REQUIRED_MATCHER_PROVIDER

---