Skip to content

SiDatepickerOverlayDirective documentation

selectorexported-as
[siDatepickerOverlay]siDatepickerOverlay

Directive with the responsibility to open/close datepicker overlay.

Output Properties

NameTypeDescription
siDatepickerClose
CloseCauseOutput event on closing datepicker e.g. by clicking backdrop or escape key.

Attributes and Methods

NameTypeDefaultDescription
closeAfterSelection()
() => voidClose overlay with cause select, which will recover the focus
closeOverlay()
() => undefinedClose datepicker.
contains(...)
(element: HTMLElement) => booleanIndicate whether the HTML element is a child of the datepicker overlay.

Parameters
focus(...)
(focus: boolean = true) => thisFocus active cell in datepicker.
Returns current instance.

Parameters
  • focus: boolean = true  show transfer focus.
isShown()
() => (undefined | ComponentRef<SiDatepickerOverlayComponent>)Indicate the datepicker is visible.
Returns is visible.
setInputs(...)
(inputs: Partial<DatepickerInput>) => thisSet datepicker inputs

Parameters
showOverlay(...)
(focus: boolean = false, inputs: Partial<DatepickerInput>) => ComponentRef<SiDatepickerOverlayComponent>Show datepicker overlay.
Returns create datepicker overlay instance

Parameters
isFocused()
Deprecated		() => booleanDeprecated: Property provides internal information that should not be used.
toggleOverlay(...)
Deprecated		(focus: boolean, inputs: Partial<DatepickerInput>) => (undefined | ComponentRef<SiDatepickerOverlayComponent>)Toggle open/close overlay.
Returns create datepicker overlay instance or undefined
Deprecated: Use showOverlay or closeOverlay instead.

Parameters

Types Documentation

Enum members
Backdrop: "backdrop"
Detach: "detach"
Escape: "escape"
Select: "select"
{ config: DatepickerConfig, date: Date, dateRange: DateRange, rangeType: ("START" | "END"), showTime: true, time12h: boolean }
Properties
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString
Options to turn on date range selection.
enableDateRange?: boolean
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString
Consider time with minDate and maxDate
enableTimeValidation?: boolean
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean
endTimeLabel?: string
hideLabels?: boolean
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean
hoursAriaLabel?: string
hoursLabel?: string
hoursPlaceholder?: string
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean
Maximal (latest) selectable date.
maxDate?: Date
meridians?: string[]
meridiansAriaLabel?: string
meridiansLabel?: string
millisecondsAriaLabel?: string
millisecondsLabel?: string
millisecondsPlaceholder?: string
Minimal (earliest) selectable date.
minDate?: Date
minutesAriaLabel?: string
minutesLabel?: string
minutesPlaceholder?: string
Only month and year are selectable.
onlyMonthSelection?: boolean
secondsAriaLabel?: string
secondsLabel?: string
secondsPlaceholder?: string
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean
Defines the timepicker visibility. Default is false .
showTime?: boolean
startTimeLabel?: string
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart
{ end: (Date | undefined), start: (Date | undefined) }
(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.
("monday" | "saturday" | "sunday" | undefined)
("START" | "END" | undefined)
Translatable
import
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)>)
InjectionToken<SiFormItemControl> = ...
Variable
Properties
key: string
message?: string
params: any
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
lgMinimum: number
mdMinimum: number
smMinimum: number
xlMinimum: number
xxlMinimum: number
Properties
controlName?: string
controlNameTranslationKey?: string
errorCode: string
errorCodeTranslationKey?: string
errorParams?: any
implements OnChanges, OnInit, AfterViewInit, OnDestroy
Constructor
() => {}
Properties
activeHover?: Cell
completeAnimation: WritableSignal<boolean> = ...
Object to configure the datepicker.
config: InputSignal<DatepickerConfig> = {}
The selected date of the datepicker. Use for initialization and for bidirectional binding.
date: ModelSignal<(undefined | Date)> = ...
datepicker: Signal<SiDatepickerComponent> = ...
The selected date range of the datepicker. Use for initialization and for bidirectional binding.
dateRange: ModelSignal<(undefined | DateRange)> = ...
Emits an event to notify about disabling the time from the datepicker. When time is disable, we construct a pure date object in UTC 00:00:00 time.
disabledTimeChange: OutputEmitterRef<boolean> = ...
disableTime: boolean = false
document: Document = ...
elementRef: ElementRef<any> = ...
firstDatepickerConfig: WritableSignal<DatepickerConfig> = ...
focusMonitor: FocusMonitor = ...
focusTrap: ConfigurableFocusTrap
focusTrapFactory: ConfigurableFocusTrapFactory = ...
Set initial focus to calendar body.
initialFocus: InputSignalWithTransform<boolean, unknown> = false
Deprecated: Property provides internal information that should not be used.
isFocused: boolean = false
Indicate that the overlay is opened in small screen. A modal dialog animation display when true and a wrapped two month calendar layout is displayed.
isMobile: InputSignal<boolean> = false
isTwoMonthDateRange: Signal<boolean> = ...
maxMonth: WritableSignal<(undefined | Date)> = ...
minMonth: WritableSignal<(undefined | Date)> = ...
previousActiveElement?: (HTMLElement | Element)
Use this to force date range operation to select either start date or end date.
rangeType: ModelSignal<(undefined | "START" | "END")> = ...
secondDatepickerConfig: WritableSignal<DatepickerConfig> = ...
Enable/disable 12H mode in timepicker. Defaults to locale
time12h: InputSignalWithTransform<boolean, unknown> = false
Methods
(newFocusedDate: Date) => void
Parameters
newFocusedDate?: Date
Focus active cell in the current datepicker view.
focusActiveCell: () => void
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
(newFocusedDate: Date) => void
Parameters
newFocusedDate?: Date
implements OnInit, OnChanges, AfterViewInit
Constructor
() => {}
Properties
The cell which which has the mouse hover.
activeHover: ModelSignal<(undefined | Cell)> = ...
Get the current shown view.
activeView: Signal<(undefined | SiDaySelectionComponent | SiMonthSelectionComponent | SiYearSelectionComponent)> = ...
actualFocusedDate: Signal<Date> = ...
Aria label for week number column
calenderWeekLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`
cdRef: ChangeDetectorRef = ...
Object to configure the datepicker.
config: ModelSignal<DatepickerConfig> = {}
The selected date of the datepicker. Use for initialization and for bidirectional binding.
date: ModelSignal<(undefined | Date)> = ...
The selected date range of the datepicker. Use for initialization and for bidirectional binding.
dateRange: ModelSignal<(undefined | DateRange)> = ...
dateRangeRole: InputSignal<RangeType> = ...
Reference to the current day selection component. Shown when view === 'week'
daySelection: Signal<(undefined | SiDaySelectionComponent)> = ...
defaultDisabledTimeText: TranslatableString = ...
defaultEnableTimeText: TranslatableString = ...
Disabled the optional visible time picker.
disabledTime: ModelSignal<boolean> = false
The date which is currently focused Compare to the selected date or range the calendar requires to have one element to focus.
focusedDate: ModelSignal<(undefined | Date)> = ...
When the user switch from the year or month view via keyboard selection we force the focus.
forceFocus: Signal<boolean> = ...
hideCalendar: InputSignal<boolean> = ...
Option to hide the time switch.
hideTimeToggle: InputSignal<boolean> = false
includeTimeLabel: Signal<TranslatableString> = ...
Set initial focus to calendar body.
initialFocus: InputSignal<boolean> = false
locale: string = ...
localeWeekStart: WeekStart
Optional input to control the maximum month the datepicker can show and the user can navigate. The maxMonth can be smaller than the maxDate This option enables the usage of multiple datepickers next to each other while the more left calendar always shows a earlier month the the more right one.
maxMonth: InputSignal<(undefined | Date)> = ...
Optional input to control the minimum month the datepicker can show and the user can navigate. The minMonth can be larger than the minDate This option enables the usage of multiple datepickers next to each other while the more left calendar always shows a earlier month the the more right one.
minMonth: InputSignal<(undefined | Date)> = ...
months: string[] = []
Reference to the current month selection component. Shown when view === 'month'
monthSelection: Signal<(undefined | SiMonthSelectionComponent)> = ...
monthViewSwitchTo: ("month" | "week") = 'week'
Aria label for the next button. Needed for a11y.
nextLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.NEXT:Next`
Aria label for the previous button. Needed for a11y.
previousLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.PREVIOUS:Previous`
Used to hold the last time when setting the time to disabled. Value will be reset on enabling the time again.
previousTime?: Date
Use this to force date range operation to select either start date or end date.
rangeType: ModelSignal<RangeType> = 'START'
requireFocus: WritableSignal<boolean> = ...
switchId: string = ...
Date object to track and change the time. Keeping time and date in separate objects to not change the date when flipping time. After change, a new date object is created with an adapted time.
time?: Date
Enable/disable 12H mode in timepicker. Defaults to locale
time12h: InputSignalWithTransform<(undefined | boolean), unknown> = undefined
timePicker: Signal<(undefined | SiTimepickerComponent)> = ...
timepickerId: string = ...
Optional timepicker label.
timepickerLabel: InputSignal<(undefined | string)> = ...
The active view
view: WritableSignal<ViewType> = ...
Reference to the current year selection component. Shown when view === 'year'
yearSelection: Signal<(undefined | SiYearSelectionComponent)> = ...
Configuration which view shall be shown after year selection, when onlyMonthSelection is enabled the month view is shown otherwise the week view.
yearViewSwitchTo: ("month" | "week") = 'week'
Accessors
get endDate: (undefined | Date)
get hideWeekNumbers: boolean
get startDate: (undefined | Date)
get weekStartDay: WeekStart
Methods
(selection: (null | Date)) => void
Handle month/year changes
Parameters
the selected month or null of cancelled.
selection: (null | Date)
(selection: (null | Date)) => void
Handle year changes
Parameters
the selected year or null of cancelled.
selection: (null | Date)
Focus the active cell in view. The function is required to transfer the focus from input to the active date cell.
focusActiveCell: () => void
Returns the date object if not range selection is enabled. Otherwise, if the date range role is 'END', the date range end date is returned. If date range role is not 'END', the date range start date is returned.
getRelevantDate: () => (undefined | Date)
Initialize day and month labels
initCalendarLabels: () => void
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 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
(event: Cell) => void
Parameters
event?: Cell
onDisabledTimeChanged: () => void
(selection: Date) => void
Handle selection in the day view.
Parameters
selected date.
selection: Date
(newDate: Date) => void
Validates and sets a new date to the this.date model object of this component and fires the related events. The model object shall not be updated elsewhere with a new date object. Shall only be called on simple date selection and not on date range selection.
Parameters
The new date to be set.
newDate: Date
(newDateRange: DateRange) => boolean
Validates and sets the new date range to the dateRange model object.
Returns True if the new range is valid and set. Otherwise false.
Parameters
The new range to be set.
newDateRange: DateRange
(newTime: Date) => void
Parameters
newTime: Date
toggleDisabledTime: () => void
(date: Date) => void
Parameters
date: Date
implements ControlValueAccessor, SiFormItemControl
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.
Constructor
() => {}
Properties
cdRef: ChangeDetectorRef = ...
disabled: Signal<boolean> = ...
All input fields will be disabled if set to true.
disabledInput: InputSignal<boolean> = false
disabledNgControl: WritableSignal<boolean> = ...
errormessageId: string implements errormessageId = ...
Hide the labels of the input fields.
hideLabels: InputSignalWithTransform<boolean, unknown> = false
hours: string = ''
hoursAriaLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.HOURS:Hours`
hoursLabel: InputSignal<TranslatableString> = 'hh'
hoursPlaceholder: InputSignal<string> = 'hh'
id: InputSignal<string> implements id = __si-timepicker-${SiTimepickerComponent.idCounter++}
inputCompleted: OutputEmitterRef<void> = ...
inputParts: Signal<readonly ElementRef<HTMLElement>[]> = ...
invalidHours: boolean = false
invalidMilliseconds: boolean = false
invalidMinutes: boolean = false
invalidSeconds: boolean = false
isValid: OutputEmitterRef<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: string implements labelledby = ...
locale: string = ...
A maximum time limit. The date part of the date object will be ignored.
max: InputSignal<(undefined | Date)> = ...
meridian: WritableSignal<("" | "am" | "pm")> = ...
meridianChange: OutputEmitterRef<string> = ...
meridians: InputSignal<(undefined | string[])> = ...
meridiansAriaLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.PERIOD:Period`
meridiansLabel: InputSignal<TranslatableString> = 'am/pm'
milliseconds: string = ''
millisecondsAriaLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`
millisecondsLabel: InputSignal<TranslatableString> = 'ms'
millisecondsPlaceholder: InputSignal<string> = 'ms'
A minimum time limit. The date part of the date object will be ignored.
min: InputSignal<(undefined | Date)> = ...
minutes: string = ''
minutesAriaLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.MINUTES:Minutes`
minutesLabel: InputSignal<TranslatableString> = 'mm'
minutesPlaceholder: InputSignal<string> = 'mm'
onChange: (val: any) => void = ...
onTouched: () => void = ...
periodDefaults: string[]
periods: Signal<string[]> = ...
readonly: InputSignalWithTransform<boolean, unknown> = false
seconds: string = ''
secondsAriaLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.SECONDS:Seconds`
secondsLabel: InputSignal<TranslatableString> = 'ss'
secondsPlaceholder: InputSignal<string> = 'ss'
Show time in 12-hour period including the select to toggle between AM/PM.
showMeridian: InputSignal<(undefined | boolean)> = ...
showMilliseconds: InputSignalWithTransform<boolean, unknown> = false
showMinutes: InputSignalWithTransform<boolean, unknown> = true
showSeconds: InputSignalWithTransform<boolean, unknown> = false
Holds the time as date object that is presented by this control.
time?: Date
use12HourClock: Signal<boolean> = ...
idCounter: number = 0
Methods
(value: Date, diff: TimeComponents) => Date
Parameters
value?: Date
diff?: TimeComponents
(key: string, up: boolean) => void
Parameters
key: string
up: boolean
(date: (undefined | Date), time: TimeComponents) => (undefined | Date)
Parameters
date: (undefined | Date)
time: TimeComponents
(event: FocusOrigin) => void
Parameters
event: FocusOrigin
(event: Event) => void
Focuses the next available input/select field or emit inputCompleted event.
Parameters
event: Event
(event: KeyboardEvent) => void
Handle Enter, Arrow up/down and Space key press events.
Parameters
event: KeyboardEvent
(hours: string, isPM: boolean) => boolean
Parameters
hours: string
isPM: boolean
(hours: string, minutes: string = '0', seconds: string = '0', milliseconds: string = '0', isPM: boolean) => boolean
Parameters
hours: string
minutes: string = '0'
seconds: string = '0'
milliseconds: string = '0'
isPM: boolean
(milliseconds: string) => boolean
Parameters
milliseconds: string
(minutes: string) => boolean
Parameters
minutes: string
isPM: () => boolean
(seconds: string) => boolean
Parameters
seconds: string
(value: (string | Date)) => boolean
Parameters
value?: (string | Date)
isValidLimit: () => boolean
(value: (string | number), isPM: boolean = false) => number
Parameters
value?: (string | number)
isPM: boolean = false
(value: (string | number)) => number
Parameters
value?: (string | number)
(value: (string | number)) => number
Parameters
value?: (string | number)
(value: (string | number)) => number
Parameters
value?: (string | number)
(value: (string | Date)) => (undefined | Date)
Parameters
value?: (string | Date)
(fn: any) => void from ControlValueAccessor.registerOnChange
@description: Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

@usageNotes: ### Store the change function

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}


When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: {
   '(change)': '_onChange($event.target.value)'
}
Parameters
The callback function to register
fn: any
(fn: () => void) => void from ControlValueAccessor.registerOnTouched
@description: Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

@usageNotes: ### Store the callback function

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}


On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: {
   '(blur)': '_onTouched()'
}
Parameters
The callback function to register
fn: () => void
(isDisabled: boolean) => void from ControlValueAccessor.setDisabledState
@description: Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

@usageNotes: The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}
Parameters
The disabled status to set on the element
isDisabled: boolean
(time: Date) => void
Sets a new time object as model value, updates the user interface and invokes onChange to let timepicker clients know about the update.
Parameters
The new time to be set.
time?: Date
toggleMeridian: () => void
(target: (null | EventTarget)) => HTMLInputElement
Parameters
target?: (null | EventTarget)
(value: (string | number)) => number
Parameters
value?: (string | number)
(value: (string | number)) => void
Parameters
value: (string | number)
(value: (string | number)) => void
Parameters
value: (string | number)
(value: (string | number)) => void
Parameters
value: (string | number)
(value: (string | number)) => void
Parameters
value: (string | number)
Takes the current UI values and updates the time object value accordingly, if they UI input values are valid.
updateTime: () => void
(value: (string | Date)) => void
Updates the user interface by filling the time components into the time input fields. Sets empty values if the date is undefined or invalid.
Parameters
The date object or string from with the time components are taken.
value?: (string | Date)
(obj: (string | Date)) => void from ControlValueAccessor.writeValue
@description: Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

@usageNotes: ### Write a value to the element

The following example writes a value to the native DOM element.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}
Parameters
The new value for the element
obj?: (string | Date)
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
<(TControl: { [ K in keyof TControl ]: AbstractControl })>
Constructor
() => {}
Properties
The container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input.
contentContainerBreakpoints: InputSignal<(undefined | Breakpoints)> = ...
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.
controlNameTranslateKeyMap: InputSignal<Map<string, string>> = new Map<​string, string​>()
In 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.
disableContainerBreakpoints: InputSignalWithTransform<boolean, unknown> = false
Disables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46.
disableErrorPrinting: InputSignalWithTransform<boolean, unknown> = false
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.
errorCodeTranslateKeyMap: InputSignal<(undefined | SiFormValidationErrorMapper | Map<string, string>)> = ...
errorResolver: SiFormValidationErrorService = ...
Set the form entity to the container to enable the overall form validation on in the form container edit panel.
form: InputSignal<(undefined | FormGroup<TControl>)> = ...
formErrorMapper: Signal<{ [ key: string ]: (undefined | string | (error: any) => string) } }> = ...
hasParentContainer: boolean = ...
A custom width value to be applied to all labels.

Example:
labelWidth="100px".
labelWidth: InputSignal<(undefined | string)> = ...
A 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.
readonly: InputSignalWithTransform<boolean, unknown> = false
Accessors
Indicates whether the content editor message shall be styled as warning.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid.
get invalidFormContainerMessage: boolean
Indicates 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 .
get userInteractedWithForm: boolean
Indicates whether content editor message shall be styled as success.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid.
get validFormContainerMessage: boolean
Methods
(controlName: string) => (undefined | string)
Parameters
controlName: string
(formGroup: FormGroup) => SiFormValidationError[]
Parameters
formGroup: FormGroup
(control: AbstractControl, controlName: string) => SiFormValidationError[]
Parameters
control: AbstractControl
controlName?: string
(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
An optional name of a control that is part of the form.
controlName?: string
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.