I created a custom validator to validate uniqueness in my FormArray. I want to show error when specific(s) value(s) is/are already in array.

The problem is that it isn't working as expected.

Actual behavior:

Steps to reproduce:

• Add 3 "inputs" - address;
• Fill input 1;
• Fill input 2 with different value;
• Fill input 3 with the same value of input 1; (no errors appear, neither in input 1 nor in input 3)

Expected behavior:

If the same values appears in "X groups", their specific inputs must show the error.

In the case described above the errors should appear on input 1 and 3.

Supposing that I have 4 inputs:

1. value: stack
2. value: overflow
3. value: stack
4. value: overflow

The 4 inputs must show an error, because all of them are duplicates.

static uniqueBy = (field: string, caseSensitive = true): ValidatorFn => {
  return (formArray: FormArray): { [key: string]: boolean } => {
    const controls = formArray.controls.filter(formGroup => {
      return isPresent(formGroup.get(field).value);
    });
    const uniqueObj = { uniqueBy: true };
    let found = false;

    if (controls.length > 1) {
      for (let i = 0; i < controls.length; i++) {
        const formGroup = controls[i];
        const mainControl = formGroup.get(field);
        const val = mainControl.value;    
        const mainValue = caseSensitive ? val.toLowerCase() :  val;

        controls.forEach((group, index) => {
          if (i === index) {
            // Same group
            return;
          }

          const currControl = group.get(field);
          const tempValue = currControl.value;
          const currValue = caseSensitive ? tempValue.toLowerCase() : tempValue;
          let newErrors;

          if ( mainValue === currValue) {
            if (isBlank(currControl.errors)) {
              newErrors = uniqueObj;
            } else {
              newErrors = Object.assign(currControl.errors, uniqueObj);
            }

            found = true;
          } else {
            newErrors = currControl.errors;

            if (isPresent(newErrors)) {
              // delete uniqueBy error
              delete newErrors['uniqueBy'];

              if (isBlank(newErrors)) {
                // {} to undefined/null
                newErrors = null;
              }
            }
          }

          // Add specific errors based on condition
          currControl.setErrors(newErrors);
        });
      }

      if (found) {
        // Set errors to whole formArray
        return uniqueObj;
      }
    }

    // Clean errors
    return null;
  };
}

You can check it here DEMO.