Skip to content

SiFormItemControlInputDirective documentation

selector
[siFormItemControl]

Deprecated: This directive is no longer needed. SiFormItemComponent will detect native controls automatically.

Input Properties

NameTypeDefaultDescription
id
string...The actual id of the control that should be used in the for attribute of a label.
(writeonly) type
string

Attributes and Methods

NameTypeDefaultDescription
isFormCheck
booleanfalseIndicate the form item is a checkbox or radio input.

Types Documentation

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)>)
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)
InjectionToken<SiFormItemControl> = ...
Variable
Properties
lgMinimum: number
mdMinimum: number
smMinimum: number
xlMinimum: number
xxlMinimum: number
(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.
Properties
controlName?: string
controlNameTranslationKey?: string
errorCode: string
errorCodeTranslationKey?: string
errorParams?: any
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
<(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.