Utilities Showcase

Explore the powerful form utilities and custom validators included in this template.

Available Utilities
FormUtils
  • markAllAsTouched(form) - Mark all controls as touched
  • getAllErrors(form) - Get all validation errors
  • getErrorMessage() - Get user-friendly error messages
  • formatFieldName() - Format field names nicely
  • validateForm() - Validate and get error messages
CustomValidators
  • matchesField() - Match another field (e.g., password confirmation)
  • phoneNumber() - Validate phone numbers
  • strongPassword() - Enforce strong password rules
  • url() - Validate URLs
  • creditCard() - Validate credit card numbers
  • minAge(), maxAge() - Age validation
  • dateRange() - Date range validation
Registration Form Demo
Showcasing CustomValidators in action
Username is required
Username must be at least 3 characters
Email is required
Must be a valid email address
Must be a valid phone number
Optional. Format: (123) 456-7890 or 123-456-7890
Password must contain uppercase, lowercase, number, and special character (min 8 chars)
Passwords must match
Must be a valid URL (e.g., https://example.com)
Login Form Demo
Simple validation example
Email is required
Must be a valid email address
Password is required
Password must be at least 6 characters
Form Errors (from FormUtils.getAllErrors)
{{ error[0] }}:
  • {{ msg }}
Usage Examples
FormUtils Example:
// Mark all form controls as touched
FormUtils.markAllAsTouched(this.form);

// Get all validation errors
const errors = FormUtils.getAllErrors(this.form);

// Get formatted error message
const msg = FormUtils.getErrorMessage('email', 'required', true);
CustomValidators Example:
// In your form definition
this.form = this.fb.group({
  password: ['', [Validators.required, CustomValidators.strongPassword()]],
  confirmPassword: ['', [
    Validators.required, 
    CustomValidators.matchesField('password')
  ]],
  phone: ['', CustomValidators.phoneNumber()],
  website: ['', CustomValidators.url()]
});