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
@if (hasError(registrationForm, "username", "required")) {
Username is required
} @if (hasError(registrationForm, "username", "minlength")) {
Username must be at least 3 characters
}
@if (hasError(registrationForm, "email", "required")) {
Email is required
} @if (hasError(registrationForm, "email", "email")) {
Must be a valid email address
}
@if (hasError(registrationForm, "phone", "phoneNumber")) {
Must be a valid phone number
} Optional. Format: (123) 456-7890 or 123-456-7890
@if (hasError(registrationForm, "password", "strongPassword")) {
Password must contain uppercase, lowercase, number, and special character (min 8 chars)
}
@if ( hasError(registrationForm, "confirmPassword", "matchesField") ) {
Passwords must match
}
@if (hasError(registrationForm, "website", "url")) {
Must be a valid URL (e.g., https://example.com)
}
Login Form Demo
Simple validation example
@if (hasError(loginForm, "email", "required")) {
Email is required
} @if (hasError(loginForm, "email", "email")) {
Must be a valid email address
}
@if (hasError(loginForm, "password", "required")) {
Password is required
} @if (hasError(loginForm, "password", "minlength")) {
Password must be at least 6 characters
}
@if (Object.keys(formErrors).length > 0) {
Form Errors (from FormUtils.getAllErrors)
@for (error of Object.entries(formErrors); track error[0]) {
{{ error[0] }}:
    @for (msg of error[1]; track msg) {
  • {{ 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()]
});