Angular 2+ Custom form validation breaks the form methods

Question

I have a form:

public buildUserForm(user: User = null): void {
    this.selectedUserForm = this.fb.group({
      id: 0,
      isActive: [true],
      isSuperUser: [null],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      username: ['', [Validators.required, UniqueNameValidator(this.userNamesList, user)]],
      password: ['',
        Validators.pattern('^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)[A-Za-z\\d!$%@#£€*?&]{8,}$')],
      emailAddress: ['', Validators.email],
      businessEmailAddress: ['', Validators.email],
      address1: ['', Validators.maxLength(50)],
      address2: ['', Validators.maxLength(50)],
      city: ['', Validators.maxLength(30)],
      stateProvince: ['', Validators.maxLength(30)],
      postalCode: ['', Validators.maxLength(10)],
      phoneNumber1: ['', Validators.maxLength(10)],
      employeeId: [''],
      notes: ['']
    });
    this.onFormChanges();
  }

and a custom form validator:

import { Directive } from '@angular/core';
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

Directive({
  selector: '[uniqueName]'
});

export function UniqueNameValidator(array: any[], exception = null): ValidatorFn {
  const valObject = { nameDuplicate: true }
  return (control: AbstractControl): ValidationErrors | null => {
    if (exception) {
      if (control.value === exception.name || control.value === exception.username) {
        return array.findIndex(item => item.name === control.value || item.username === control.value) > 0 ? valObject : null;
      } else {
        return array.findIndex(item => item.name === control.value || item.username === control.value) > 0 ? valObject : null;
      }
    } else {
      return array.findIndex(item => item.name === control.value || item.username === control.value) > 0 ? valObject : null;
    }
  };
}

The validator works and gives me the proper messages. But the methods like this.selectedUserForm.touched or this.selectedUserForm.valid no longer work and always show False now. How can I restore the form without loosing my custom form validation.

Answer 1

Your validator function needs to return an error if it is not unique.

uniqueValidation(list: string[]): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {  
      if (c.value === null || c.pristine || c.value === '') {
        return null;
      } else if (c.dirty) {
        return (list.find(x => x === c.value)) ? { 'notunique': true } : null;
      }
      return null;
    }
  }

Usage:

selectedUserForm: FormGroup;
  userNamesList: string[] = ['name1', 'name2']

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.buildForm();
  }

  uniqueValidation(list: string[]): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {  
      if (c.value === null || c.pristine || c.value === '') {
        return null;
      } else if (c.dirty) {
        return (list.find(x => x === c.value)) ? { 'notunique': true } : null;
      }
      return null;
    }
  }

  buildForm() {
    this.selectedUserForm = this.fb.group({
      userName: [null, [Validators.required, this.uniqueValidation(this.userNamesList)]]
    });
  }

Demo: https://stackblitz.com/edit/angular-unique-validator-akeje2?file=src%2Fapp%2Fapp.component.ts

In this demo, type 'name1' or 'name2' and the validation will fail and a message will appear that it is not unique.