Let us assume, we have a custom Angular component that acts as a form control and we want to enable the use of the “Validators.required” validator on it.

Assuming the custom control component has the name MyCustomControlComponent, here’s how we can enable the use of Validators.required:

1. Import Necessary Angular Forms Modules:

Make sure to import the necessary Angular forms modules in your custom control component.

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, Validators, AbstractControl } from '@angular/forms';

2. Implement ControlValueAccessor and Validator Interfaces:

Ensure that our custom control component implements the ControlValueAccessor and Validator interfaces.

@Component({
  selector: 'app-my-custom-control',
  template: `
    <!-- our custom control implementation -->
    <input [(ngModel)]="value" />
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomControlComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => MyCustomControlComponent),
      multi: true,
    },
  ],
})
export class MyCustomControlComponent implements ControlValueAccessor, Validator {
  value: any;

  // ControlValueAccessor methods and properties

  // Validator interface method
  validate(control: AbstractControl): { [key: string]: any } | null {
    return Validators.required(control);
  }
}

PS: “NG_VALIDATORS” is provided, and the “validate” method is implemented to apply the Validators.required validation.

3. Use the Custom Control in a Form:

Now we can use our custom control component in a form, and the Validators.required validator will be applied to it.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <app-my-custom-control formControlName="myCustomControl"></app-my-custom-control>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myCustomControl: [null, Validators.required],
    });
  }
}

Now, when we use Validators.required in the form control definition for myCustomControl, it will be applied to our custom control component.

See also the link : Angular : Implementing Control Value Accessor