Used for typeahead functionality when filtering is disabled. If provided, this will be used, otherwise the innerText of the rendered element. typeaheadLabel?: string¶
The value if this option. It will be used for formControls and the value property of this si-select . The value will internally be checked on equality by using === . So an app should either use string or ensure that same values are referentially equal. value: T¶
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.
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)>)¶
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.
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.
By default, values are check on referential equality. Provide a function to customize the behavior. optionsEqual: InputSignal<(a: T, b: T) => boolean> = (a: T, b: T): boolean => a === b¶
List of all options that are currently selected. Must be updated when onValueChange is called. selectedRows: Signal<SelectOption<T>[]> from SiSelectOptionsStrategyBase.selectedRows = ...¶
Methods
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. ngOnChanges: () => void from OnChanges.ngOnChanges¶
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.
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 the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
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.
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¶
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.
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¶
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¶
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 .
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>)> = ...¶
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¶
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¶
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¶
¶