Your FormArray consists of FormGroups, allowing you to inspect a single FormControl within the FormGroup.

(If your FormArray were made up of FormControls, you would need to implement validators on the "FormArray" itself.)

By applying a validator to a control, we gain access to its parent and grandparent elements. In this scenario, the component's parent is the formGroup and the parent of the parent is the formArray.

The challenge arises when adding a validator to a FormControl that relies on others; in such cases, we must ensure that the control is also validated whenever related controls are modified.

I will attempt to clarify through comments, so please make sure to comprehend the logic instead of merely copying the code.

  uniqueLabelsValidator() {
    return (control: AbstractControl) => {
      //only validate if the control has a value
      if (control.value) {
        //retrieve the formGroup
        const group = control?.parent as AbstractControl;

        //obtain the FormArray
        const array = control?.parent?.parent as FormArray;

        if (array) {
          //determine the index of the formGroup
          //e.g., when modifying the second "label," 
          //the group corresponds to the second formGroup (index=1)

          const index = array.controls.findIndex(
            (x: AbstractControl) => x == group
          );

          //update and validate all subsequent "labels" after the specified index
          //in the given example, it refers to labels in the third or fourth position

          setTimeout(()=>{
            array.controls.forEach((group:AbstractControl,i:number)=>{
              i>index && group.get('label')?.updateValueAndValidity()
            })
  
          })

          //create an array containing the values of the labels

          const values = array.value.map((group: any) => group.label);

          //check for any duplicate values before the changed "label"
          if (
            values.find((x: any, i: number) => x == control.value && i < index)
          )
            return { duplicate: true };
        }
      }
      return null;
    };
  }

You can explore this functionality further in the StackBlitz demo.

UPDATE: The previous validator only marks the "duplicate" as an error, not both. To flag both as duplicates, replace i<index and i>index with i!=index.

uniqueLabelsValidator() {
    return (control: AbstractControl) => {
      ...
          setTimeout(()=>{
            array.controls.forEach((group:AbstractControl,i:number)=>{
              i!=index && group.get('label')?.updateValueAndValidity()
            })
  
          })
          ...
          if (
            values.find((x: any, i: number) => x == control.value && i != index)
          )
            return { duplicate: true };
        }
      }
      ...
    };
  }

If you're looking for a robust solution, I recommend exploring the @rxweb/reactive-form-validators library.

To understand how to implement unique validation, you can refer to this article: Unique Validation (Please note that the article also includes code samples for implementing unique values without RxWeb validators)

1. Start by importing RxReactiveFormsModule into your app module or standalone component.

import {
  RxReactiveFormsModule,
  RxwebValidators,
} from '@rxweb/reactive-form-validators';

2. Integrate RxwebValidators.unique() validation along with an optional message parameter in the form control.

private createField() {
  return this.formBuilder.group({
    label: ['', [Validators.required, RxwebValidators.unique({ message: "Label must be unique." })]],
  });
}

3. Display the unique validation message on the HTML page.

<small
  class="form-text text-danger"
  *ngIf="getField(i).controls['label'].errors"
>
  {{getField(i).controls["label"].errors?.["unique"]?.message}}
</small>

If you want to see a live demonstration, check out this example on StackBlitz: Demo @ StackBlitz

this validation function will return null, but it will flag control errors for duplicated values

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

export function checkDuplicates(fieldName: string): ValidatorFn {
  return (formArray: AbstractControl): ValidationErrors | null => {
    const values = new Set<string>();

    if (formArray instanceof FormArray) {
      formArray.controls.forEach((control) => {
        const fieldControl = control.get(fieldName);
        const value = fieldControl.value as string;

        if (!fieldControl.hasError('required')) {
          if (values.has(value)) {
            fieldControl.setErrors({ duplicateValue: true });
          } else {
            values.add(value);
            if (fieldControl.hasError('duplicateValue')) {
              fieldControl.setErrors(null);
            }
          }
        }
      });
    }

    return null;
  };
}

to implement this custom validator, apply it like this:

form: FormGroup = this.formBuilder.group({
  fields: this.formBuilder.array([], [checkDuplicates('value')]),
});