FN Field Message

FNFieldMessage is a versatile Angular component designed to handle field-level validation and helper messages with ease. It integrates seamlessly with Angular's FormControl and supports error mapping, translation, and custom styling.

Features

• Dynamic Message Rendering: Automatically switches between helper text and validation errors based on field state.
• Built-in Styling: Includes predefined color codes for different statuses (Error, Success, Helper, Disabled).
• Angular Reactive Forms Integration: Works directly with FormControl and responds to value/status changes.
• Translation Support: Integrated with @ngx-translate/core for localized error messages.
• Stand-alone Component: Easy to import and use without complex module setup.

Installation

npm install fn-field-message

Setup

Ensure you have @ngx-translate/core and fn-label installed in your project.

import { FNFieldMessage } from 'fn-field-message';

@Component({
  standalone: true,
  imports: [FNFieldMessage],
  // ...
})
export class MyComponent {}

Usage

<fn-field-message [field]="fieldConfig" [control]="myForm.get('myField')" [hasFocus]="isFocused">
</fn-field-message>

Inputs

| Input | Type | Description | | :--------- | :------------ | :---------------------------------------------------------------------------------- | | field | any | Configuration object containing helperText, errors mapping, and label. | | control | FormControl | The Angular form control to monitor. | | hasFocus | boolean | (Optional) Indicates if the field has focus, used for immediate validation updates. |