--- title: Understanding Angular's Control Value Accessor Interface description: If you're dealing with Angular forms on a regular basis one of the most powerful things you can learn is how to use the Control Value Accessor interface. image: https://www.bitovi.com/hubfs/ngblur2.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | August 5, 2019 # Understanding Angular's Control Value Accessor Interface If you're dealing with Angular forms on a regular basis one of the most powerful things you can learn is how to use the Control Value Accessor interface. ![Jennifer Wadella](https://www.bitovi.com/hubfs/People/jennifer-w.jpg) Jennifer Wadella Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) If you're dealing with [forms in Angular](https://www.bitovi.com/why-build-with-angular) on a regular basis one of the most powerful things you can learn is how to use the Control Value Accessor interface. The CVA interface is a bridge between FormControls and their elements in the DOM. A component extending the CVA interface can create a custom form control that behaves the same as a regular input or radio button. ## Why Would You Want to Use the Control Value Accessor Interface? Sometimes you may need to create a custom form element that you want to be able to use as a regular FormControl. (For a better understanding of FormControls and other Angular Form classes you might want to read my article [here](https://dev.to/angular/managing-nested-and-dynamic-forms-in-angular-1he6)). For example, creating a 5 star rating UI that updates a single value. We'll use this example in our demo. [![star rating input](https://res.cloudinary.com/practicaldev/image/fetch/s--1NApGLsr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u7nuzhlku5y7k4mwtsfn.gif)](https://res.cloudinary.com/practicaldev/image/fetch/s--1NApGLsr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/u7nuzhlku5y7k4mwtsfn.gif) There's a lot happening in the UI here - stars changing colors as they're hovered over and displaying different text for each ratings, but all we care about is saving a number value 0-5. ## Implementing the CVA To use the CVA interface in a component, you must implement its three required methods: `writeValue`, `registerOnChange`, and `registerOnTouched`. There is also an optional method `setDisabledState`. The `writeValue` method is called in 2 situations: - When the formControl is instantiated ``` rating = new FormControl({value: null, disabled: false}) ``` - When the formControl value changes ``` rating.patchValue(3) ``` The `registerOnChange` method should be called whenever the value changes - in our case, when a star is clicked on. The `registerOnTouched` method should be called whenever our UI is interacted with - like a blur event. You may be familiar with implementing Typeaheads from a library like Bootstrap or NGX-Bootstrap that has an `onBlur` method. The `setDisabledState` method is called in 2 situations: - When the formControl is instantiated with a disabled prop ``` rating = new FormControl({value: null, disabled: false}) ``` - When the formControl disabled status changes ``` rating.disable(); rating.enable(); ``` A star rating component implementing the CVA may look something like this: ``` export class StarRaterComponent implements ControlValueAccessor { public ratings = [ { stars: 1, text: 'must GTFO ASAP' }, { stars: 2, text: 'meh' }, { stars: 3, text: 'it\'s ok' }, { stars: 4, text: 'I\'d be sad if a black hole ate it' }, { stars: 5, text: '10/10 would write review on Amazon' } ] public disabled: boolean; public ratingText: string; public _value: number; onChanged: any = () => {} onTouched: any = () => {} writeValue(val) { this._value = val; } registerOnChange(fn: any){ this.onChanged = fn } registerOnTouched(fn: any){ this.onTouched = fn } setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } setRating(star: any) { if(!this.disabled) { this._value = star.stars; this.ratingText = star.text this.onChanged(star.stars); this.onTouched(); } } } ``` You must also tell Angular that your component implementing the CVA is a value accessor(remember, interfaces aren't compiled in TypeScript) using NG_VALUE_ACCESSOR and forwardRef. ``` import { Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'gr-star-rater', templateUrl: './star-rater.component.html', styleUrls: ['./star-rater.component.less'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StarRaterComponent), multi: true } ] }) export class StarRaterComponent implements ControlValueAccessor { ... ``` ## Using Your New CVA Component Now, to use your fancy new CVA component, you can treat it as a plain old FormControl. ``` this.galaxyForm = new FormGroup({ rating: new FormControl({value: null, disabled: true}) }); ``` ```

Galaxy Rating App

``` Tada! Not so scary, huh? Need help managing other complicated form situations in your application? We're available for [training](https://www.bitovi.com/angular-training) or for [hire](https://www.bitovi.com/frontend-javascript-consulting/angular-consulting), just let us know what you need help with!  [![Tag for development](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) development ](https://www.bitovi.com/blog/topic/development)[![Tag for javascript](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) javascript ](https://www.bitovi.com/blog/topic/javascript) Previous Post ![ngblur2](https://www.bitovi.com/hs-fs/hubfs/ngblur2.png?height=117&name=ngblur2.png) [ Managing Nested and Dynamic Forms in Angular ](https://www.bitovi.com/blog/managing-nested-and-dynamic-forms-in-angular)   Next Post ![mentorbanner](https://www.bitovi.com/hs-fs/hubfs/mentorbanner.png?height=117&name=mentorbanner.png) [ 13 Things an Angular Consultant Needs to Know to Be Successful ](https://www.bitovi.com/blog/13-things-an-angular-consultant-needs-to-know-to-be-successful) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/understanding-angulars-control-value-accessor-interface", "@type" : "WebPage", "description" : "If you're dealing with Angular forms on a regular basis one of the most powerful things you can learn is how to use the Control Value Accessor interface." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Jennifer Wadella" }, "dateModified" : "June 17, 2024, 8:19:08 PM", "datePublished" : "2019-08-05 13:30:00", "description" : "If you're dealing with Angular forms on a regular basis one of the most powerful things you can learn is how to use the Control Value Accessor interface.", "headline" : "Understanding Angular's Control Value Accessor Interface", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/ngblur2.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```