Form Field
A wrapper component that provides a consistent layout for form controls, including labels, hints, and validation errors.
Default & Hints
Combine hlm-form-field with hlm-hint to provide helpful context for your users.
form-field-example-default.ts
Validation & Errors
Use hlm-error to display validation messages when a form control is invalid and has been interacted with.
form-field-example-error.ts
Complex Form Integration
Seamlessly integrate with Angular Reactive Forms and various controls like inputs and selects.
form-field-example-form.ts
Immediate Validation
Using ShowOnDirtyErrorStateMatcher to show errors as soon as the user starts typing.
Immediate Validation Mode
Errors will appear as soon as you start typing (dirty), rather than waiting for the field to be blurred (touched).form-field-example-dirty.ts
API Reference
Helm API
Styling components following the spartan/ui design system.
| Component | Selector | Description |
|---|---|---|
| HlmFormField | hlm-form-field | Main wrapper for labels, controls, hints, and errors. |
| HlmHint | hlm-hint | Used to display helpful hint text below the control. |
| HlmError | hlm-error | Used to display validation error messages. |
Installation & Usage
Installation
Imports
Error State Matcher
To show errors on dirty instead of touched, add this to your component providers: