libs/core/building-blocks/src/lib/dynamic-form-bb/dynamic-form-bb.component.ts
AbstractBuildingBlock<
DynamicFormBbState,
DynamicFormBbResources
>
| changeDetection | ChangeDetectionStrategy.Eager |
| providers |
createBuildingBlockProvider(forwardRef(() => DynamicFormBuildingBlock))
|
| selector | taly-dynamic-form-bb |
| styleUrls | dynamic-form-bb.component.scss |
| templateUrl | dynamic-form-bb.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
constructor()
|
| id | |
Type : any
|
|
Default value : dasherize(this.constructor.name)
|
|
|
Inherited from
AbstractBuildingBlock
|
|
|
can be changed during runtime and given as a default by the implemented Building Block |
|
| rawResources | |
Type : BuildingBlockResources
|
|
|
Inherited from
AbstractBuildingBlock
|
|
|
Sets raw resource configuration for Dynamic Forms Building Blocks. Unlike regular resources, this setter preserves the original format needed by form configurations. Do not use this for regular Building Blocks - use |
|
| resources | |
Type : BuildingBlockResources
|
|
|
Inherited from
AbstractBuildingBlock
|
|
|
The method will be called by the facade
and is marked as an @Input. Derived Building Blocks need to list
the input in the @Component decorator under |
|
| state | |
Type : NoArray<BuildingBlockState>
|
|
|
Inherited from
AbstractBuildingBlock
|
|
|
The method will be called by the facade
and is marked as an @Input. Derived Building Blocks need to list
the input in the @Component decorator under |
|
| completed | |
Type : EventEmitter
|
|
|
Inherited from
AbstractBuildingBlock
|
|
|
Mark this Building Block as complete. That way a workflow engine can determine the overall completion state of any given pages. This method can be actively triggered by the user (say a button is clicked) or indirectly by a form being changed. The author of a Building Block needs to make sure that this function is called during the lifetime of a Building Block. If the Building Block is purely presentational this method can be called during initialization. |
|
| getForm |
getForm()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
any
|
| getState |
getState()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
DynamicFormBbState
|
| setFormCompletion | ||||||
setFormCompletion(complete: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| setRawResources | ||||||
setRawResources(data: DynamicFormBbResources)
|
||||||
|
Inherited from
AbstractBuildingBlock
|
||||||
|
Parameters :
Returns :
void
|
| setState | ||||||
setState(data: DynamicFormBbState)
|
||||||
|
Inherited from
AbstractBuildingBlock
|
||||||
|
Parameters :
Returns :
void
|
| applyValidationConfig | |||||||||
applyValidationConfig(form: UntypedFormGroup, config: ValidationConfigItem[])
|
|||||||||
|
Inherited from
AbstractBuildingBlock
|
|||||||||
|
Apply a validation configuration to a form group. For each accepted validation (as we only support a subset of validations) we will create a configuration entry (ValidationConfig) which is used to find the control & apply the validations. Validation Error Message are independent of the form control. The form control only knows about the validation name that goes wrong. The actual processing of those needs to happen in the template. For this purpose we return the entire map of ValidationConfig objects to easily access the errorMessages available in there.
Parameters :
Returns :
Map<string, ValidationConfig[]>
|
| callBusinessEvent | ||||||||
callBusinessEvent(event: string)
|
||||||||
|
Inherited from
AbstractBuildingBlock
|
||||||||
|
This method creates a Deferred object for the business event given. This will have a newly created promise and their executor parameters resolve & reject. This deferred object is then emitted along with the business event name The Store Integration(Facade) can then decide when to resolve or reject the underlying promise based on the service activator call attached to the business event. call's status.
Parameters :
Returns :
Promise<unknown>
the promise from the deferred. The building block can then be notified on the respective service activator call's status. |
| commitCompletion |
commitCompletion()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
void
|
| navigate | |||||||||
navigate(type: BUILDING_BLOCK_NAVIGATION_TYPE, payload?: string)
|
|||||||||
|
Inherited from
AbstractBuildingBlock
|
|||||||||
|
Parameters :
Returns :
void
|
| onPageConnection |
onPageConnection()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
void
|
| onPageDisconnected |
onPageDisconnected()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
void
|
| revertCompletion |
revertCompletion()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
void
|
| setResources | ||||||
setResources(data: BuildingBlockResources | undefined)
|
||||||
|
Inherited from
AbstractBuildingBlock
|
||||||
|
Parameters :
Returns :
void
|
| setValidationConfiguration | ||||||
setValidationConfiguration(data: ValidationConfigItem[])
|
||||||
|
Inherited from
AbstractBuildingBlock
|
||||||
|
Parameters :
Returns :
void
|
| stateChanged |
stateChanged()
|
|
Inherited from
AbstractBuildingBlock
|
|
Returns :
void
|
| transformResources | ||||||
transformResources(data: BuildingBlockResources)
|
||||||
|
Inherited from
AbstractBuildingBlock
|
||||||
|
Override if you need to pre process the incoming resource data and if you want to establish some default values. The return value will arrive in setResources and stored in the 'resources' variable. Needs to match the Resource Generic of the given Building Block
Parameters :
Returns :
BuildingBlockResources
|
| transformState | ||||||
transformState(data: NoArray<BuildingBlockState>)
|
||||||
|
Inherited from
AbstractBuildingBlock
|
||||||
|
Override if you need to pre process the incoming state data and if you want to establish some default values. The return value will arrive in setState and stored in the 'state' variable. Needs to match the State Generic of the given Building Block
Parameters :
Returns :
NoArray<BuildingBlockState>
|
| _aclService |
Type : AclService
|
|
Inherited from
AbstractBuildingBlock
|
| aclTag |
Type : AclTag | null
|
|
Inherited from
AbstractBuildingBlock
|
| businesssEventCall$ |
Type : unknown
|
Default value : new EventEmitter<BusinessEvent>()
|
|
Inherited from
AbstractBuildingBlock
|
| Readonly channel |
Type : CHANNEL
|
|
Inherited from
AbstractBuildingBlock
|
| completion$ |
Type : unknown
|
Default value : new BehaviorSubject(false)
|
|
Inherited from
AbstractBuildingBlock
|
| connected$ |
Type : unknown
|
Default value : new Subject<void>()
|
|
Inherited from
AbstractBuildingBlock
|
|
Lifecycle Event called once the Building Block is connected to the page. This can only happen when the Building Block is embed in a Building Block Page This is not intended to be used standalone. At this point you can be sure that:
|
| disconnected$ |
Type : unknown
|
Default value : new Subject<void>()
|
|
Inherited from
AbstractBuildingBlock
|
| Readonly isExpertChannel |
Type : boolean
|
|
Inherited from
AbstractBuildingBlock
|
| Readonly isRetailChannel |
Type : boolean
|
|
Inherited from
AbstractBuildingBlock
|
| loadingStatus$ |
Type : unknown
|
Default value : this._loadingStatus$
.asObservable()
.pipe(
scan(accumulateBusinessEvents, []),
map(groupEventStatusesByName),
distinctUntilChanged(isEqual)
)
|
|
Inherited from
AbstractBuildingBlock
|
| navigateEvent$ |
Type : unknown
|
Default value : new EventEmitter<BuildingBlockNavigationEvent>()
|
|
Inherited from
AbstractBuildingBlock
|
| Readonly renderReady$ |
Type : unknown
|
Default value : new BehaviorSubject(true)
|
|
Inherited from
AbstractBuildingBlock
|
|
Signals whether this Building Block has finished rendering its content. This is distinct from Defaults to Note: a Building Block that does not opt in is still covered by the frame's DOM
stability heuristic. |
| stateChange$ |
Type : unknown
|
Default value : new BehaviorSubject({} as BuildingBlockState)
|
|
Inherited from
AbstractBuildingBlock
|
|
Call this function to grab the current state and forward it any time your internal state is ready to be forwarded. It's a BehaviorSubject to always deliver the latest state on subscription. TODO: Evaluate if a multicast could help maintaining an more coordiated data stream |
| trackForm$ |
Type : unknown
|
Default value : new EventEmitter<UntypedFormGroup>()
|
|
Inherited from
AbstractBuildingBlock
|
|
Can be used to add automatic tracking to a form. Keep in mind that the form that is returned by getForm() is tracked automatically during the initialization. This only has to be called if there are other forms that should be tracked or if the form is created after the initialization. |
import { NO_MARGIN } from '@allianz/taly-core';
import { DynamicFormConfiguration } from '@allianz/taly-core/schemas';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
forwardRef,
inject
} from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { DynamicFormBbResources, DynamicFormBbState } from './dynamic-form-bb.model';
import { AbstractBuildingBlock } from '../building-block/abstract-building-block';
import { createBuildingBlockProvider } from '../building-block/create-building-block-provider';
@Component({
selector: 'taly-dynamic-form-bb',
templateUrl: 'dynamic-form-bb.component.html',
styleUrls: ['dynamic-form-bb.component.scss'],
providers: [createBuildingBlockProvider(forwardRef(() => DynamicFormBuildingBlock))],
standalone: false,
// This component wraps taly-dynamic-form which can potentially render user-made form fields.
// It must use Eager change detection so that those components are checked properly.
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
changeDetection: ChangeDetectionStrategy.Eager
})
export class DynamicFormBuildingBlock extends AbstractBuildingBlock<
DynamicFormBbState,
DynamicFormBbResources
> {
protected noMargin = inject(NO_MARGIN);
protected formGroup = new UntypedFormGroup({});
protected formConfig?: DynamicFormConfiguration;
protected formRawValue: Record<string, unknown> | undefined;
protected nxColValue = this.noMargin ? '12, 12, 12' : '12, 12, 8';
private changeDetectorRef = inject(ChangeDetectorRef);
constructor() {
super();
this.setRenderReady(false);
}
override setRawResources(data: DynamicFormBbResources): void {
if (data?.talyDynamicFormConfig) {
this.formConfig = data.talyDynamicFormConfig;
}
if (this.isExpertChannel) {
this.nxColValue = this.formConfig?.layout?.fullWidthFormInExpert ? '12, 12, 12' : '12, 12, 6';
}
this.changeDetectorRef.markForCheck();
}
protected formDataChange() {
this.stateChanged();
}
override setState(data: DynamicFormBbState): void {
this.formRawValue = data;
this.changeDetectorRef.markForCheck();
}
override getState(): DynamicFormBbState {
return this.formRawValue ?? {};
}
setFormCompletion(complete: boolean) {
if (complete) {
this.commitCompletion();
} else {
this.revertCompletion();
}
}
protected processBusinessEvent(businessEvent: string) {
this.callBusinessEvent(businessEvent);
}
override getForm() {
return this.formGroup;
}
}
<div nxLayout="grid nopadding" [containerQuery]="true">
<div nxRow [rowJustify]="isExpertChannel ? 'start' : 'center'" class="dynamic-form-bb-grid-row">
<div [nxCol]="this.nxColValue" data-testid="column-container">
<taly-dynamic-form
[id]="id"
[formConfig]="formConfig"
[existingFormGroup]="formGroup"
(formInitFinished)="setRenderReady($event)"
(formValid)="setFormCompletion($event)"
[(formRawValue)]="formRawValue"
(formRawValueChange)="formDataChange()"
(businessEvent)="processBusinessEvent($event)"
data-testid="dynamicForm"
></taly-dynamic-form>
</div>
</div>
</div>
dynamic-form-bb.component.scss
:host {
display: block;
}