Angular Custom Form Control


hi I am trying to create a set of custom reactive form controls for easy usage in templates.
so far I have managed to create one using ControlValueAccessor interface. the editing of form is working fine but I am not able to display error messages with it. can anyone suggest a way to pass and display error message in the custom controls html

here is my code


<div style="font-size: 12px">
  <mat-form-field appearance="outline">
    <mat-label>{{ label }}</mat-label>


import { Component, Input, OnChanges } from '@angular/core';
import {
} from '@angular/forms';
import { getErrorMessage } from '../form-fields.helper';

  selector: 'x-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss'],
  providers: [
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: TextInputComponent,
export class TextInputComponent implements ControlValueAccessor {

  public textInputFormControl = new FormControl('');
  onTouched = () => {};
  onChange: (_: string) => {};

  public label: string;

  public readonly: boolean;

  public change() {

  writeValue(value: any): void {
  registerOnChange(fn: any): void {
    this.onChange = fn;
  registerOnTouched(fn: any): void {
    this.onTouched = fn;

  setDisabledState(disabled: boolean) {
      ? this.textInputFormControl.disable({ emitEvent: false })
      : this.textInputFormControl.enable({ emitEvent: false });



Your custom form control doesn’t have to be reactive forms specific. It can be form-module agnostic. Also, if you need validations, you will need to implement the Validator interface.

Here is a StackBlitz demo that demonstrates how to do this. See the required-field component.

You can also check this article that I wrote, which explains extensively how to create a custom form control with validations and all.


To answer your question in the comment, there is this guide in Material’s official documentation. Frankly speaking, I’ve never implemented a custom control with Material, but I don’t see why you wouldn’t be able to inject NgControl and omit the formControl, like in the StackBlitz demo.

Answered By – Vasileios Kagklis

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.