@WidgetComponent
File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
nm-dynamic-form |
| styleUrls |
dynamic-form.component.widget.scss |
| templateUrl |
./dynamic-form.component.widget.html |
Index
Widget inputs
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Widget outputs
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Properties
|
|
|
Methods
|
|
|
Methods
|
Public
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Public
addFields
|
addFields:
|
Default value : new Subject<DynamicFormField[]>()
|
Decorators : WidgetInput
|
|
|
Adds fields dynamically to the form.
|
|
Public
clickOutput
|
clickOutput:
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
|
Emits when clicking on a field.
|
|
Public
dialogContext
|
dialogContext:
|
Default value : new Subject<{ field: string; context: any }>()
|
Decorators : WidgetInput
|
|
|
Sets dialog context for field used with page-dialog type fields.
|
|
Public
droppedValueOutput
|
droppedValueOutput:
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
|
|
|
|
Public
enterPressedOutput
|
enterPressedOutput:
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
|
Emits when Enter is pressed.
|
|
Public
initOutput
|
initOutput:
|
Default value : new ReplaySubject<any>(1)
|
Decorators : WidgetOutput
|
|
|
Emits after form fields initialization.
|
|
Public
labelSetter
|
labelSetter:
|
Default value : new Subject<{ field: string; value: any }>()
|
Decorators : WidgetInput
|
|
|
|
|
|
Public
lookupOptionsInput
|
lookupOptionsInput:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
|
Sets lookup options for lookup types.
|
|
Public
reloadLookup
|
reloadLookup:
|
Default value : new Subject<string>()
|
Decorators : WidgetInput
|
|
|
Forces the field to reload its lookup options.
|
|
Public
removeAllFields
|
removeAllFields:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
|
Removes all fields dynamically from the form.
|
|
Public
removeFields
|
removeFields:
|
Default value : new Subject<string[]>()
|
Decorators : WidgetInput
|
|
|
Removes fields dynamically from the form.
|
|
Public
reset
|
reset:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
|
|
|
|
Public
resetFormFields
|
resetFormFields:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
|
|
|
|
Public
resetLookup
|
resetLookup:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
|
Removes all lookup options for a field.
|
|
Public
setDisabled
|
setDisabled:
|
Default value : new Subject<{ field: string; value: boolean }>()
|
Decorators : WidgetInput
|
|
|
Disables\Enables a field.
|
|
Public
setHidden
|
setHidden:
|
Default value : new Subject<{ field: string; value: boolean }>()
|
Decorators : WidgetInput
|
|
|
|
|
|
Public
unsubscribe
|
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
|
|
|
Public
validOutput
|
validOutput:
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
|
Emits after validation rules are applied when a field value changes.
|
|
Public
valueOutput
|
valueOutput:
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
|
Emits when a field value is changed.
|
|
Public
valueSetter
|
valueSetter:
|
Default value : new Subject<{ field: string; value: any }>()
|
Decorators : WidgetInput
|
|
|
|
|
|
Public
widgetId
|
widgetId: string
|
Type : string
|
Decorators : WidgetId
|
|
|
import {
WidgetComponent,
WidgetConfiguration,
WidgetConfigure,
WidgetId,
WidgetInput,
WidgetOutput,
} from "../widget.metadata";
import { ChangeDetectionStrategy, Component, OnDestroy } from "@angular/core";
import {
getOrDefault,
throwErrorIfUndefined,
WidgetConfig,
} from "../widget.configuration";
import { Subject, ReplaySubject } from "rxjs";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import {
DynamicFormField,
DynamicFormConfiguration,
} from "./dynamic-form-component/dynamic-form-fields.component";
@WidgetComponent("nm-dynamic-form")
@Component({
selector: "nm-dynamic-form",
templateUrl: "./dynamic-form.component.widget.html",
styleUrls: ["./dynamic-form.component.widget.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DynamicFormComponentWidget implements OnDestroy {
public header: string;
public withHeader: boolean;
public fields: DynamicFormField[];
public unsubscribe = NgUnsubscribe.create();
@WidgetId()
public widgetId: string;
@WidgetConfiguration()
public configuration: WidgetConfig<DynamicFormConfiguration>;
/**
* Sets lookup options for lookup types.
*/
@WidgetInput("lookupOptions")
public lookupOptionsInput = new Subject<any>();
/**
* Removes all lookup options for a field.
*/
@WidgetInput("resetLookup")
public resetLookup = new Subject<any>();
/**
* Forces the field to reload its lookup options.
*/
@WidgetInput("reloadLookup")
public reloadLookup = new Subject<string>();
/**
* Sets a field value.
*/
@WidgetInput("valueSetter")
public valueSetter = new Subject<{ field: string; value: any }>();
/**
* Sets a field label.
*/
@WidgetInput("labelSetter")
public labelSetter = new Subject<{ field: string; value: any }>();
/**
* Disables\Enables a field.
*/
@WidgetInput("setDisabled")
public setDisabled = new Subject<{ field: string; value: boolean }>();
/**
* Sets dialog context for field used with page-dialog type fields.
*/
@WidgetInput("dialogContext")
public dialogContext = new Subject<{ field: string; context: any }>();
/**
* Resets form fields.
*/
@WidgetInput("resetFormFields")
public resetFormFields = new Subject<any>();
/**
* Hides\shows a field.
*/
@WidgetInput("setHidden")
public setHidden = new Subject<{ field: string; value: boolean }>();
/**
* Resets form.
*/
@WidgetInput("reset")
public reset = new Subject<any>();
/**
* Adds fields dynamically to the form.
*/
@WidgetInput("addFields")
public addFields = new Subject<DynamicFormField[]>();
/**
* Removes fields dynamically from the form.
*/
@WidgetInput("removeFields")
public removeFields = new Subject<string[]>();
/**
* Removes all fields dynamically from the form.
*/
@WidgetInput("removeAllFields")
public removeAllFields = new Subject<any>();
/**
* Emits when a field value is changed.
*/
@WidgetOutput("value")
public valueOutput = new Subject<any>();
/**
* Emits when clicking on a field.
*/
@WidgetOutput("onClick")
public clickOutput = new Subject<any>();
/**
* Emits when Enter is pressed.
*/
@WidgetOutput("onEnterPressed")
public enterPressedOutput = new Subject<any>();
/**
* Emits after validation rules are applied when a field value changes.
*/
@WidgetOutput("valid")
public validOutput = new Subject<any>();
/**
* Emits after form fields initialization.
*/
@WidgetOutput("init")
public initOutput = new ReplaySubject<any>(1);
/**
* Emits the dropped value.
*/
@WidgetOutput("droppedValue")
public droppedValueOutput = new Subject<any>();
constructor() {}
@WidgetConfigure()
public configureWidget(
configuration: WidgetConfig<DynamicFormConfiguration>
) {
this.header = getOrDefault(
this.configuration.configuration.header,
"primary"
);
this.withHeader = getOrDefault(
this.configuration.configuration.withHeader,
false
);
const fields = throwErrorIfUndefined(
"fields",
this.configuration.configuration
);
//Flat copy the array so if the component modifies this we dont modifiy the base configuration
this.fields = [...fields];
}
ngOnDestroy(): void {
this.unsubscribe.destroy();
}
}
<!--suppress BuyFluidPluginNoteInspection -->
<nm-widgetframe
[header]="header"
[configuration]="configuration"
[infoTitle]="configuration.configuration.infoTitle"
[widgetId]="widgetId"
[infoText]="configuration.configuration.infoText"
[infoPlacement]="'bottom'"
[wikiLink]="configuration.configuration.wikiLink"
[withBorder]="configuration.configuration.withBorder"
>
<div *ngIf="withHeader" slot="title" class="nm-widgetframe__title">
<span class="title-font"
>{{configuration.configuration.title |translate}}</span
>
</div>
<div slot="content" class="nm-widgetframe__content">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</nm-widgetframe>
<ng-template #content>
<nm-dynamic-form-fields-component
[configuration]="configuration.configuration"
[fields]="fields"
[lookupOptions]="lookupOptionsInput"
[resetLookup]="resetLookup"
[reloadLookup]="reloadLookup"
[valueSetter]="valueSetter"
[labelSetter]="labelSetter"
[setDisabled]="setDisabled"
[dialogContext]="dialogContext"
[resetFormFields]="resetFormFields"
[setHidden]="setHidden"
[reset]="reset"
[addFields]="addFields"
[removeFields]="removeFields"
[removeAllFields]="removeAllFields"
(value)="valueOutput.next($event)"
(onClick)="clickOutput.next($event)"
(onEnterPressed)="enterPressedOutput.next($event)"
(valid)="validOutput.next($event)"
(init)="initOutput.next($event)"
(droppedValue)="droppedValueOutput.next($event)"
>
</nm-dynamic-form-fields-component>
</ng-template>
Legend
Html element with directive