@greatefue/generate_form_errors

Generate HTML error messages for invalid Angular FormGroup fields with custom labels.

📦 Installation

npm install @greatefue/generate_form_errors
# or
yarn add @greatefue/generate_form_errors

⚡ Angular Example

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);

Example Output

Please fill in the following required fields: 
<a href="javascript:void(0);"><span class="py-1 px-2 fs-12 bg-soft-danger rounded text-danger fw-medium">Firstname</span></a>, 
<a href="javascript:void(0);"><span class="py-1 px-2 fs-12 bg-soft-danger rounded text-danger fw-medium">Lastname</span></a>,
<a href="javascript:void(0);"><span class="py-1 px-2 fs-12 bg-soft-danger rounded text-danger fw-medium">Username</span></a>

⚡ JavaScript Example

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);

Example Output

Please fill in the following required fields: 
<a href="javascript:void(0);"><span class="py-1 px-2 fs-12 bg-soft-danger rounded text-danger fw-medium">Firstname</span></a>, 
<a href="javascript:void(0);"><span class="py-1 px-2 fs-12 bg-soft-danger rounded text-danger fw-medium">Lastname</span></a>,
<a href="javascript:void(0);"><span class="py-1 px-2 fs-12 bg-soft-danger rounded text-danger fw-medium">Username</span></a>