DEV Community: krishna

Understanding angular ControlValueAccessor with an example

krishna — Tue, 09 May 2023 00:16:26 +0000

In my previous article, I explained the ControlValueAccessor Interface now lets deep dive with an example.

Let’s say you have a custom input component that is meant to accept phone numbers in a specific format, such as (123) 456–8799. You want to create a custom form control that will enforce this format and allow for easy data binding to the component.

To achieve this, you can create a ControlValueAccessor for the custom input component. The ControlValueAccessor interface defines four methods that you need to implement: writeValue(), registerOnChange(), registerOnTouched(), and setDisabledState().

Here’s an example implementation of the ControlValueAccessor interface for our custom phone number input component:

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

@Component({
  selector: 'app-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true
    }
  ]
})
export class PhoneNumberInputComponent implements ControlValueAccessor {
  myForm! : FormGroup;
  private onChange: (value: string) => void;
  private onTouched: () => void;

  public phoneNumber: string;

   constructor(private fb: FormBuilder) { 
    this.myForm = this.fb.group({
       // implement the formcontrol
    })
   }
  public writeValue(value: string): void {
    this.phoneNumber = value;
  }

  public registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  public registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  public setDisabledState?(isDisabled: boolean): void {
    // Implement if needed
  }

  public onPhoneNumberChanged(): void {
    // enforce the phone number format
    const formattedPhoneNumber = this.phoneNumber.replace(/[^0-9]/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
    this.phoneNumber = formattedPhoneNumber;

    // notify the form control that the value has changed
    this.onChange(formattedPhoneNumber);
  }

  public onBlur(): void {
    this.onTouched();
  }
}

In the above code, we first import ControlValueAccessor and NG_VALUE_ACCESSOR from the @angular/forms module. We then implement the ControlValueAccessor interface in our PhoneNumberInputComponent class.

The writeValue() method is called by the Angular forms API when the value of the form control is updated. We simply set the phoneNumber property to the value passed in.

The registerOnChange() and registerOnTouched() methods are used to register callback functions that Angular calls when the value or touched state of the control changes. We store these callback functions in private class properties onChange and onTouched.

The setDisabledState() method is optional and can be implemented if you want to disable the input control.

The onPhoneNumberChanged() method is called whenever the phone number input value changes. We enforce the phone number format by replacing all non-numeric characters and formatting the string with parentheses and hyphens. We then call the onChange() method with the formatted phone number to notify the form control that the value has changed.

The onBlur() method is called whenever the input control loses focus. We call the onTouched() method to notify the form control that the input has been touched.

By implementing the ControlValueAccessor interface, our custom phone number input component can be easily used in a reactive form. In the above code, we first import ControlValueAccessor and NG_VALUE_ACCESSOR from the @angular/forms module. We then implement the ControlValueAccessor interface in our PhoneNumberInputComponent class.

The writeValue() method is called by the Angular forms API when the value of the form control is updated. We simply set the phoneNumber property to the value passed in.

The setDisabledState() method is optional and can be implemented if you want to disable the input control.

The onBlur() method is called whenever the input control loses focus. We call the onTouched() method to notify the form control that the input has been touched.

By implementing the ControlValueAccessor interface, our custom phone number input component can be easily used in a reactive form.

And in the template, you will create a form with FormGroup where you will specify the component and use the app-phone-number-input like the below example.

<form [formGroup]="myForm">
  <label for="phone">Phone number:</label>
  <app-phone-number-input formControlName="phone"></app-phone-number-input>
</form>

In the above code, we first create a FormGroup in our component's class and assign it to the formGroup attribute of the <form> element.

We then create a label for the phone number input and use the formControlName directive to bind the phone number input to the "phone" form control.

Finally, we use the <app-phone-number-input> custom input component and pass it the "phone" form control.

Now, whenever the phone number input value changes, the onPhoneNumberChanged() method in our PhoneNumberInputComponent will be called, and the value will be propagated to the "phone" form control through the onChange() callback.

Similarly, whenever the input loses focus, the onBlur() method will be called, and the onTouched() callback will be called to mark the control as touched.

Note that you also need to import the ReactiveFormsModule in your module in order to use reactive forms in your application

Understanding Angular ControlValueAccessor

krishna — Mon, 08 May 2023 19:04:06 +0000

Today I am going to explain What is ControlValueAccessor in Angular, its advantage and why I chose ControlValueAccessor.

Angular ControlValueAccessor is an interface in Angular that is used to bridge the gap between Angular Forms and custom form controls. This interface provides a way for custom form controls to communicate with Angular Forms, allowing them to be used in template-driven and reactive forms.

To use Angular ControlValueAccessor, you need to implement it in your custom form control. The interface consists of two methods:

writeValue(): This method is used to update the value of the custom form control. When this method is called, the new value is passed as an argument.

registerOnChange(): This method is used to register a callback function that will be called whenever the value of the custom form control changes. The callback function is passed as an argument.

By implementing these methods, your custom form control can now be used in template-driven and reactive forms just like any other built-in form control.
Here is an example of how to implement Angular Control Accessor in a custom form control:

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

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true,
    },
  ],
})
export class CustomInputComponent implements ControlValueAccessor {
  value: string;

  onChange = (value: string) => {};
  onTouched = () => {};

  writeValue(value: string): void {
    this.value = value;
    this.onChange(value);
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

In this example, we have implemented the ControlValueAccessor interface in our custom form control, CustomInputComponent. We have also provided this component to the NG_VALUE_ACCESSOR injection token, which makes it available for use in Angular Forms.

The writeValue() method updates the value of the custom form control and calls the onChange() callback function.

The registerOnChange() method registers the onChange() callback function.

The registerOnTouched() method registers the onTouched() callback function, which is called when the custom form control is touched.

With Angular ControlValueAccessor interface, you can create powerful and flexible custom form controls that can be used seamlessly with Angular Forms.

So far we saw what is ControlValueAccessor with example and the explanation of the each method. Now, I am going to write some benefits of using Angular ControlValueAccessors.

ControlValueAccessors provide a standard interface for accessing and manipulating form control values, status, and errors. This makes it easier to work with form controls in a consistent way, regardless of the specific type of control or how it is implemented.
By using ControlValueAccessors, you can create custom form controls that can be used in templates and validated in the same way as built-in form controls. This allows you to create more flexible and reusable components for forms.
ControlValueAccessors allow you to create custom validators that can be used with any form control. This can simplify the validation code for your forms, and make it easier to write and maintain.
Using ControlValueAccessors can improve the performance of your forms by reducing the number of change detection cycles required. This is because control accessors allow you to manually trigger change detection only when needed, rather than relying on Angular’s default change detection behavior.

Overall, using ControlValueAccessors can simplify and improve the development of forms in Angular applications, and provide a more consistent and flexible way to work with form controls.

In my next article, let’s see an example on how we use ControlValueAccessor Interface.