Skip to content

SiFormContainerComponent documentation

selector
si-form-container

Input Properties

NameTypeDefaultDescription
contentContainerBreakpoints
BreakpointsThe container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input.
controlNameTranslateKeyMap
Map<string, string>new Map<​string, string​>()A map the maps from control names of the form to their translate keys. The initial map is empty and the user is responsible to add the required translate keys.
disableContainerBreakpoints
booleanfalseIn some scenarios, one may not want the form container to be responsible for the layout relevant si-container-[xs|...] classes, but let this be done by a different, nested component, e.g. by a group box. In these cases, the property should be set to true.
disableErrorPrinting
booleanfalseDisables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46.
errorCodeTranslateKeyMap
(SiFormValidationErrorMapper | Map<string, string>)Every validation error has an errorCode. This map holds translate keys for error codes. The keys can be used to display a translated message for each validation error. The defaults old english readable key defaults for the Angular standard validators of the Validators class like min , max or required .

Use the input to set your own translate keys for the form validators you need.
form
FormGroup<TControl>Set the form entity to the container to enable the overall form validation on in the form container edit panel.
labelWidth
stringA custom width value to be applied to all labels.
Example: labelWidth="100px".
readonly
booleanfalseA form container in readonly mode is only displaying the form content without ability to change it. The edit panel with typically save and cancel buttons is hidden. Set to true to display the edit panel.

Attributes and Methods

NameTypeDefaultDescription
(readonly) invalidFormContainerMessage
booleanIndicates whether the content editor message shall be styled as warning.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid.
(readonly) userInteractedWithForm
booleanIndicates whether the user interacted with the form.
Returns true , if the user selected at least one form element and [blurred] https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event by losing focus again (e.g. by setting focus on another element), or by editing the content of a form element. Otherwise false .
(readonly) validFormContainerMessage
booleanIndicates whether content editor message shall be styled as success.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid.
getValidationErrors(...)
Deprecated		(controlName: string) => SiFormValidationError[]Returns the validation errors of the form's control when the control name is provided. Otherwise, returns all validation errors of the form. Returns an empty arry when no form is available or if the name does not match to a control.
Deprecated: The SiFormItemComponent is able to display validation errors automatically when siFormInput directive is used.

Parameters
  • controlName: string  An optional name of a control that is part of the form.

Types Documentation

Properties
lgMinimum: number
mdMinimum: number
smMinimum: number
xlMinimum: number
xxlMinimum: number
Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.
Index signature: [ key: string ]: (undefined | string | (error: any) => string)
Properties
dateFormat?: (TranslatableString | (error: { format: string }) => TranslatableString)
email?: (TranslatableString | (error: { email: boolean }) => TranslatableString)
max?: (TranslatableString | (error: { actual: number, max: number }) => TranslatableString)
maxDate?: (TranslatableString | (error: { actual: Date, max: Date }) => TranslatableString)
maxLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
min?: (TranslatableString | (error: { actual: number, min: number }) => TranslatableString)
minDate?: (TranslatableString | (error: { actual: Date, min: Date }) => TranslatableString)
minLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
numberFormat?: (TranslatableString | (error: { numberFormat: boolean }) => TranslatableString)
pattern?: (TranslatableString | (error: { pattern: (string | RegExp) }) => TranslatableString)
required?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
requiredTrue?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
Properties
controlName?: string
controlNameTranslationKey?: string
errorCode: string
errorCodeTranslationKey?: string
errorParams?: any
Properties
key: string
message?: string
params: any
Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.
Properties
Generated ID that the SiFormItemComponent will assign to the element containing the error messages. Implementations of SiFormItemControl must generate this ID and assign it to the aria-describedby attribute of their focusable elements.

This property will be required with v48.
errormessageId?: (string | Signal<(undefined | string)>)
The actual id of the control that should be used in the for attribute of a label.
id?: (string | Signal<(undefined | string)>)
If the control is meant to be used a checkbox. This affects the label positioning.
isFormCheck?: boolean
ID that should be assigned to the label element inside the SiFormItemComponent .

If the target control is not of type input, select or button, it cannot be referenced by a label. Instead, aria-labelledby must be used to create a reference to a label. In such a case, an implementation of SiFormItemControl must provide the id of the label in labelledby . SiFormItemComponent will apply the id to the label so that it can be used inside the control to reference it in the aria-labelledby attribute.
labelledby?: (null | string | Signal<(undefined | string)>)
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
InjectionToken<SiFormItemControl> = ...
Variable
Translatable
import
implements AfterContentInit, AfterViewInit, AfterContentChecked, OnChanges, OnInit, OnDestroy
Constructor
() => {}
Properties
container: (null | SiFormContainerComponent<{ [ key: string ]: AbstractControl<any, any> } }>) = ...
controlElementRef: Signal<(undefined | ElementRef<HTMLElement>)> = ...
Disables the automatic error printing. Error printing will be enabled by default in v46.
disableErrorPrinting: InputSignalWithTransform<boolean, unknown> = false
elementRef: ElementRef<HTMLElement> = ...
errors: WritableSignal<SiFormError[]> = ...
fieldControl: Signal<(undefined | SiFormItemControl)> = ...
fieldControlNative: WritableSignal<(undefined | SiFormItemControl)> = ...
fieldControlQuery: Signal<(undefined | SiFormItemControl)> = ...
fieldset: (null | SiFormFieldsetComponent) = ...
formErrorMapper: InputSignal<(undefined | SiFormValidationErrorMapper)> = ...
hasRequiredValidator: WritableSignal<boolean> = ...
Deprecated: property has longer an effect. SiFormItem detects IDs automatically
inputId?: string
Deprecated: Remove with v48
isLegacyMode: WritableSignal<boolean> = ...
The label to be displayed in the form item. It will be translated if a translation key is available.
label: InputSignal<(undefined | null | string)> = ...
A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area.

Numbers will be converted to pixels. Using numbers is discouraged and might be dropped.

Example:
labelWidth="100px"
labelWidth: InputSignal<(undefined | string | number)> = ...
labelWidthCssVar: Signal<(undefined | string)> = ...
ngControl: Signal<(undefined | NgControl)> = ...
previousErrors?: (null | ValidationErrors)
printErrors: Signal<boolean> = ...
Deprecated: This input has no effect and can be removed.
readonly: boolean = false
required: Signal<boolean> = ...
Defines that this form item is required for the overall form to be valid.
requiredInput: InputSignalWithTransform<boolean, unknown> = false
requiredTestControl: FormControl<(null | string)> = ...
requiredValidator: Signal<(undefined | RequiredValidator)> = ...
validationErrorService: SiFormValidationErrorService = ...
validator?: (null | ValidatorFn)
Accessors
get formItemErrormessageId: (null | string)
get formItemId: (null | string)
get formItemLabelledBy: (null | string)
Methods
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
ngAfterContentChecked: () => void from AfterContentChecked.ngAfterContentChecked
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
updateRequiredState: () => void
updateValidationMessages: () => void
implements DoCheck
Constructor
() => {}
Properties
errors: Signal<SiFormError[]> = ...
formItems: WritableSignal<SiFormItemComponent[]> = ...
hasOnlyRadios: Signal<boolean> = ...
Switches all child inputs to inline mode
inline: InputSignalWithTransform<boolean, unknown> = false
isRequired: Signal<boolean> = ...
The label for the entire fieldset.
label: InputSignal<string> = ...
labelId: string = ...
Overrides the parent label width.
labelWidth: InputSignal<(undefined | string)> = ...
Adds a required marker to the label
required: InputSignalWithTransform<boolean, unknown> = false
touched: WritableSignal<boolean> = ...
labelIdCounter: number = 0
Methods
A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck
(item: SiFormItemComponent) => void
Parameters
item: SiFormItemComponent
(item: SiFormItemComponent) => void
Parameters
item: SiFormItemComponent

Except where otherwise noted, content on this site is licensed under MIT License.