Generate HTML error messages for invalid Angular FormGroup fields with labels
npm install @greatefue/generate_form_errorsbash
npm install @greatefue/generate_form_errors
or
yarn add @greatefue/generate_form_errors
`
---
âš¡ Angular Example
`typescript
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { GREAT_EFUE } from '@greatefue/generate_form_errors';
// Create a sample form
const USER_FORM = new FormGroup({
FIRST_NAME: new FormControl('', Validators.required),
LAST_NAME: new FormControl('', Validators.required),
USERNAME: new FormControl('', Validators.required),
DOB: new FormControl('')
});
// Force validation
USER_FORM.markAllAsTouched();
const LABEL_MAP = {
FIRST_NAME: 'Firstname',
LAST_NAME: 'Lastname',
USERNAME: 'Username',
DOB: 'Date of Birth'
};
// Generate the error message
const FORM_ERRORS = GREAT_EFUE.GENERATE_FORM_ERRORS(USER_FORM, LABEL_MAP);
console.log(FORM_ERRORS);
`
$3
`html
Please fill in the following required fields:
Firstname,
Lastname,
Username
`
---
âš¡ JavaScript Example
`javascript
const GREAT_EFUE = require('@greatefue/generate_form_errors');
const USER_FORM = {
controls: {
FIRST_NAME: { invalid: true, errors: { required: true } },
LAST_NAME: { invalid: true },
USERNAME: { invalid: true },
DOB: { invalid: false }
}
};
const LABEL_MAP = {
FIRST_NAME: 'Firstname',
LAST_NAME: 'Lastname',
USERNAME: 'Username',
DOB: 'Date of Birth'
};
const FORM_ERRORS = GREAT_EFUE.GENERATE_FORM_ERRORS(USER_FORM, LABEL_MAP);
console.log(FORM_ERRORS);
`
$3
`html
Please fill in the following required fields:
Firstname,
Lastname,
Username
``