ngx-message-error

The component's purpose is to encapsulate the message display logic for form validations made with ReactiveForms.

Installation

``
npm i ngx-message-error
`

Styling

The component uses CSS custom properties (CSS variables) for styling, making it easy to customize the appearance. You can override these variables globally or target specific instances:

$3

- --message-error-color: Controls the text color of error messages (default: #a94442)
- --message-error-font-size: Controls the font size of error messages (default: 12px)

$3

To style all error messages globally, add the following to your global styles:

`css
:root {
--message-error-color: #dc3545; / Bootstrap danger color /
--message-error-font-size: 14px;
}
`

$3

To style error messages for specific components or sections:

`css
.my-form {
--message-error-color: #e74c3c;
--message-error-font-size: 13px;
}
`

$3

You can also target the component directly with CSS:

`css
ngx-message-error .danger {
color: #ff0000;
font-weight: bold;
margin-top: 5px;
}

ngx-message-error div {
font-family: 'Arial', sans-serif;
line-height: 1.4;
}
`

Usage

In app.module.ts
` typescript
import { NgxMessageErrorModule, MessagesConfig } from 'ngx-message-error';

/**
* the customMessages is optional
* here you will define the default messages for your application,
* if you use a library with extra validations, you can define the keys here
*/
const customMessages: MessagesConfig = {
...
}

...
@NgModule({
imports: [
...
NgxMessageErrorModule.forRoot(customMessages)
]
})
`

NOTE #

for min and max validations, the character ? will be like a wildcard for a replace of the value indicated in the Validator
Ex:
` typescript
Validator.min(5)
message = 'my min message (?)' // result: my min message (5)
`
for minLength and maxLength validations, the first character ? will be used for the length of the form and the second will be used as a wildcard for a replace of the value indicated in the Validator
Ex:
` typescript
Validator.maxLength(5)
message = 'my minLength message (?/?)'
control.value = 'my control value' // my minLength message (16/5)
`

In component:
` typescript
constructor(private fb: FormBuilder) {}

ngOnInit() {
this.myForm = this.fb.group({
requiredInput: ['', [Validators.required]]
});
}
`
` html


ngOnInit() {
const equalTo = (value) => ((control: FormControl) => {
if (control.value === value) return null;
return { equalto: true };
});
this.myForm = this.fb.group({
customValidation: ['', [equalTo('myform')]],
});
}
`
` html