Angular

Building a Custom Form Control in Angular with ControlValueAccessor

Introduction

Creating a custom form control in Angular allows better control over form inputs, ensuring flexibility and reusability.

Why Use ControlValueAccessor?

Works smoothly with Angular’s reactive and template-driven forms.

Provides a reusable approach to handling custom input components.

Enables two-way data binding without additional boilerplate code.

Create a Custom Form Control Component

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-input',
template: '<input [value]="value" (input)="onInput($event.target.value)" />',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}]
})
export class CustomInputComponent implements ControlValueAccessor {
value: string = '';
onChange: (value: string) => void = () => {};
onTouched: () => void = () => {};
writeValue(value: string): void {
this.value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
onInput(value: string) {
this.value = value;
this.onChange(value);
}
}

Use the Custom Control in a Form

<form [formGroup]="form">
<app-custom-input formControlName="customField"></app-custom-input>
</form>

Register in a Reactive Form

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
form = new FormGroup({
customField: new FormControl('')
});
}

Conclusion

ControlValueAccessor enables seamless integration of custom form controls in Angular applications. By implementing this interface, you ensure consistent behavior with Angular’s form APIs, enhancing usability and maintainability.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our Angular Expertise.