SiTimepickerComponent documentation¶

selector

si-timepicker

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.

Input Properties¶

Name	Type	Default	Description
disabled ¶	`boolean`	`false`	All input fields will be disabled if set to true.
errormessageId ¶	`string`	`${this.id()}-errormessage`	This ID will be bound to the `aria-describedby` attribute of the timepicker. Use this to reference the element containing the error message(s) for the timepicker. It will be picked by the SiFormItemComponent if the timepicker is used inside a form item.
hideLabels ¶	`boolean`	`false`	Hide the labels of the input fields.
hoursAriaLabel ¶	`TranslatableString`	$localize`:@@SI_DATEPICKER.HOURS:Hours`
hoursLabel ¶	`TranslatableString`	`'hh'`
hoursPlaceholder ¶	`string`	`'hh'`
id ¶	`string`	`__si-timepicker-${SiTimepickerComponent.idCounter++}`
max ¶	`Date`		A maximum time limit. The date part of the date object will be ignored.
meridians ¶	`string`[]
meridiansAriaLabel ¶	`TranslatableString`	$localize`:@@SI_DATEPICKER.PERIOD:Period`
meridiansLabel ¶	`TranslatableString`	`'am/pm'`
millisecondsAriaLabel ¶	`TranslatableString`	$localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`
millisecondsLabel ¶	`TranslatableString`	`'ms'`
millisecondsPlaceholder ¶	`string`	`'ms'`
min ¶	`Date`		A minimum time limit. The date part of the date object will be ignored.
minutesAriaLabel ¶	`TranslatableString`	$localize`:@@SI_DATEPICKER.MINUTES:Minutes`
minutesLabel ¶	`TranslatableString`	`'mm'`
minutesPlaceholder ¶	`string`	`'mm'`
readonly ¶	`boolean`	`false`
secondsAriaLabel ¶	`TranslatableString`	$localize`:@@SI_DATEPICKER.SECONDS:Seconds`
secondsLabel ¶	`TranslatableString`	`'ss'`
secondsPlaceholder ¶	`string`	`'ss'`
showMeridian ¶	`boolean`		Show time in 12-hour period including the select to toggle between AM/PM.
showMilliseconds ¶	`boolean`	`false`
showMinutes ¶	`boolean`	`true`
showSeconds ¶	`boolean`	`false`

Output Properties¶

Name	Type	Description
inputCompleted ¶	`void`
isValid ¶	`boolean`
meridianChange ¶	`string`

Attributes and Methods¶

Name	Type	Default	Description
(readonly) labelledby ¶	`string`	...	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.

Types Documentation¶

SI_FORM_ITEM_CONTROL `InjectionToken`<`SiFormItemControl`> = ...¶ Variable

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

SiFormItemControl

¶

Interface

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`)>)¶

Translatable ¶ import imported from @siemens/element-translate-ng

SiFormError

¶

Interface

Properties
key: `string`¶
message?: `string`¶
params: `any`¶

SiFormValidationErrorMapper

¶

Interface

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`)¶

Breakpoints

¶

Interface

Properties
lgMinimum: `number`¶
mdMinimum: `number`¶
smMinimum: `number`¶
xlMinimum: `number`¶
xxlMinimum: `number`¶

SiFormItemComponent

implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy¶

Class

▶

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`¶
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`> = ...¶
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`> = ...¶
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¶

ngOnChanges

(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¶

SiFormContainerComponent

<(TControl: { [ K in keyof TControl ]: AbstractControl })>¶

Class

▶

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`>)> = ...¶
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

getControlNameTranslateKey

(controlName: string) => (undefined | string)¶

Parameters
controlName: `string`¶

SiFormFieldsetComponent

implements DoCheck¶

Class

▶

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¶

registerFormItem

(item: SiFormItemComponent) => void¶

Parameters
item: `SiFormItemComponent`¶

unregisterFormItem

(item: SiFormItemComponent) => void¶

Parameters
item: `SiFormItemComponent`¶

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