Skip to content

provideSiFormFieldConfig Type documentation

(config: SignalFormsConfig = {}) => Provider[]
Function
Provides the signal forms configuration required by SiFormFieldComponent .

It restores the ng-* classes applied by the directives of @angular/forms#FormsModule | FormsModule | FormsModule | FormsModule | FormsModule / @angular/forms#ReactiveFormsModule | ReactiveFormsModule | ReactiveFormsModule | ReactiveFormsModule | ReactiveFormsModule .

Example:
bootstrapApplication(AppComponent, {
  providers: [provideSiFormFieldConfig()]
});
Parameters
config: SignalFormsConfig = {}

Types Documentation

(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.
Constructs a full form field including error messages, labels and aria-* attributes. It must be used with Angular's signal forms.

Example:
<si-form-field label="Name">
  <input class="form-control" [formField]="form.name" />
</si-form-field>
Constructor
() => {}
Properties
The id of the connected control, used for the label's for attribute.
controlId: Signal<string> = ...
errormessageId: Signal<string> = ...
errors: Signal<WithFieldTree[]> = ...
fieldState: Signal<FieldState<any, (string | number)>> = ...
formField: Signal<FormField<any>> = ...
generatedId: string = ...
invalid: Signal<boolean> = ...
Whether the connected control is a form-check (checkbox, radio or switch).
isFormCheck: Signal<boolean> = ...
The label to be displayed in the form field. It will be translated if a translation key is available.
label: InputSignal<TranslatableString> = ...
required: Signal<boolean> = ...
idCounter: number = 0
Methods
syncControlId: () => void
Associates the error messages with the projected control for assistive technologies.
syncErrorDescription: () => void
Reflects the validation state onto the projected control via aria-invalid . This is needed because signal forms does not set aria-invalid , and the native :user-invalid pseudo-class ignores markAsTouched() . The matching .ng-invalid / .ng-touched classes that drive the styling are added by signal forms itself, see provideSiFormFieldConfig() .
syncInvalidState: () => void

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