Skip to content

This repository shows you how to build your own ControlValueAccessor. The example I use is a switch component.

Notifications You must be signed in to change notification settings

lyraddigital/control-value-accessors

Repository files navigation

Control Value Accessors

This repository demonstrates how to create a custom form control in Angular known as a Control Value Accessor. In short a Control Value Accessor is a component that has the ability to wire itself up to the Reactive Forms framework, making it easy to capture and validate form data. This repository will show you not only how to wire it to the Reactive Forms framework, but it will also show you how you handle enabling / disabling of your control as well.

Breakdown

This repository contains 2 branches. Each branch contains the following.

  • Startup: Contains the code before implementing the Control Value Accessor logic
  • Main: Contains the finished product, which includes the CheckboxValueAccessor class.

Development server

This project can be ran locally. Upon forking this repository, you just need to run the following commands

  • npm install
  • npx ng serve

If you have done this properly for the Startup branch you should see the following appear in your browser.

image

If you have done this for either the Main branches then you should see something similar to the following in the browser.

image

Watch on YouTube

A YouTube video on how this control works can be watched here.

Angular 12 - Building Custom Controls using Control Value Accessors

About

This repository shows you how to build your own ControlValueAccessor. The example I use is a switch component.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages