Creating Custom Validation for Angular Forms

{
  "title": "Creating Custom Validation for Angular Forms",
  "description": "Discover how to develop custom validators for Angular forms to enforce specific business logic and improve form handling.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-custom-validator-structure",
      "description": "Ensure custom validators are implemented as pure functions that return either null (valid) or an error object (invalid).",
      "severity": "error",
      "pattern": "function\\s+\\w+Validator\\(control:\\s*AbstractControl\\):\\s*ValidationErrors\\s*\\|\\s*null\\s*{[^}]*return\\s+(null|{[^}]*});[^}]*}",
      "example": "function passwordValidator(control: AbstractControl): ValidationErrors | null {\n  const value = control.value;\n  if (!value || value.length < 8) {\n    return { passwordStrength: 'Password must be at least 8 characters long.' };\n  }\n  return null;\n}"
    },
    {
      "id": "angular-custom-validator-reusability",
      "description": "Define custom validators as reusable functions or static methods within a dedicated class to promote code reuse.",
      "severity": "warning",
      "pattern": "export\\s+class\\s+\\w+Validators\\s*{[^}]*static\\s+\\w+Validator\\(control:\\s*AbstractControl\\):\\s*ValidationErrors\\s*\\|\\s*null\\s*{[^}]*}}",
      "example": "export class CustomValidators {\n  static passwordValidator(control: AbstractControl): ValidationErrors | null {\n    const value = control.value;\n    if (!value || value.length < 8) {\n      return { passwordStrength: 'Password must be at least 8 characters long.' };\n    }\n    return null;\n  }\n}"
    },
    {
      "id": "angular-custom-validator-usage",
      "description": "Apply custom validators to form controls using the Validators.compose method for clarity and maintainability.",
      "severity": "info",
      "pattern": "Validators\\.compose\\(\\[.*\\w+Validator.*\\]\\)",
      "example": "this.form = this.formBuilder.group({\n  password: ['', Validators.compose([Validators.required, CustomValidators.passwordValidator])]\n});"
    },
    {
      "id": "angular-custom-validator-error-handling",
      "description": "Provide clear and user-friendly error messages for custom validators to enhance user experience.",
      "severity": "info",
      "pattern": "return\\s+{\\s*\\w+:\\s*'.*'\\s*};",
      "example": "return { passwordStrength: 'Password must be at least 8 characters long.' };"
    },
    {
      "id": "angular-custom-validator-testing",
      "description": "Implement unit tests for custom validators to ensure they function correctly under various scenarios.",
      "severity": "warning",
      "pattern": "describe\\('\\w+Validator',\\s*\\(\\)\\s*=>\\s*{[^}]*it\\('should.*',\\s*\\(\\)\\s*=>\\s*{[^}]*expect\\(\\w+Validator\\(.*\\)\\)\\.toBe\\(.*\\);[^}]*}\\);[^}]*}\\);",
      "example": "describe('passwordValidator', () => {\n  it('should return error if password is less than 8 characters', () => {\n    const control = { value: 'short' } as AbstractControl;\n    const result = CustomValidators.passwordValidator(control);\n    expect(result).toEqual({ passwordStrength: 'Password must be at least 8 characters long.' });\n  });\n});"
    }
  ]
}