<\/p>\n\n\n\n
Let’s assume we create a custom (angular) Component “custom-select” in a reactive form and want to use it like below:<\/p>\n\n\n\n
<div [formGroup]=\"filterFormControls\">\n <custom-select [items]=\"selectItems\" formControlName=\"country\"><\/custom-select>\n<\/div>\n<\/code><\/pre>\n\n\n\nIf we yet try to transpile the code, we will get the following errors : “No value accessor for form control with name: ‘country<\/strong> … <\/em>“<\/p>\n\n\n\nThat’s happens because value accessor<\/code>\u00a0need to be implemented first in custom component.\u00a0Control Value Accessor interface gives us the power to leverage the Angular forms API, and create a connection between it and the DOM element.<\/span><\/em><\/p>\n\n\n\nHere are the STEPS: <\/p>\n\n\n\n
- Add the provider for NG_VALUE_ACCESSOR <\/strong>in the decorator<\/li><\/ol>\n\n\n\n
import ...\n import { Component, forwardRef } from '@angular\/core';\n import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular\/forms';\n \n \n @Component({\n\n selector: 'custom-select',\n templateUrl: 'custom-select.component.html',\n styleUrls: ['custom-select.component.css'],\n \/\/ STEP 1\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n multi: true,\n useExisting: forwardRef(() => CustomSelectComponent)\n }]\n })<\/code><\/pre>\n\n\n\n2. Implement the ControlValueAccessor in the class<\/p>\n\n\n\n
\/\/ STEP 2\n export class CustomSelectComponent implements ControlValueAccessor {\n \/\/ write code here .....\n }<\/code><\/pre>\n\n\n\nNow it\u2019s time to implement the ControlValueAccessor interface.<\/p>\n\n\n\n
We\u2019re going to need to implement the following methods and variables:<\/p>\n\n\n\n
- onChange\u00a0<\/strong>? the callback function to register on UI change<\/li>
- onTouch\u00a0<\/strong>? the callback function to register on element touch<\/li>
- set value(val: any)\u00a0<\/strong>? sets the value used by the ngModel of the element<\/li>
- writeValue(value: any)\u00a0<\/strong>? This will write the value to the view if the the value changes occur on the model programmatically<\/li>
- registerOnChange(fn: any)\u00a0<\/strong>? When the value in the UI is changed, this method will invoke a callback function<\/li>
- registerOnTouch(fn: any)<\/strong>\u00a0? When the element is touched, this method will get called<\/li><\/ul>\n\n\n\n
3. Create the onChange function <\/p>\n\n\n\n
\nexport class CustomSelectComponent implements ControlValueAccessor {\n ... write code here .....\n \/\/ STEP 3 : onChange function\n propagateChange = (_: any) => {\n};\n }<\/code><\/pre>\n\n\n\n4. Add the registerOnChange, writeValue and registerOnTouched methods of the ControlValueAccessor interface<\/p>\n\n\n\n
export class CustomSelectComponent implements ControlValueAccessor {\n ... write code here .....\n \/\/onChange function\n propagateChange = (_: any) => {\n};\n\n\n\/\/ STEP 4\n registerOnChange(fn: (_: any) => void) {\n this.propagateChange = fn;\n }\n writeValue() {}\n registerOnTouched(){}\n }<\/code><\/pre>\n\n\n\n5. In the method that will changed the value of select, call the onChange function passing as parameter the new-value of select.<\/p>\n\n\n\n
\nexport class CustomSelectComponent implements ControlValueAccessor {\n \/\/ write code here .....\n\n\/\/ STEP 5\n onSelectionChange(event: any) {\n this.propagateChange(event.value);\n }\n }\n\n<\/code><\/pre>\n\n\n\n6. Implement the value setter & writeValue Abstract function<\/p>\n\n\n\n
\/\/STEP 6\n\nval= \"\" \/\/ this is the updated value that the class accesses. We can also use a formControl \/\/ for example in case of a custom selectBox,we could instead use \n\/\/selectCtrl: FormControl = new FormControl();\nset value(val:any){\n if( val !== undefined && this.val !== val){\n this.val = val; \/\/ in case of selectBox: this.selectCtrl.setValue(val);\n this.propagateChange(val)\n }\n }\n\n\/\/ this method sets the value programmatically\nwriteValue(value: any){ \n this.value = value; \/\/In case of selectBox: this.selectCtrl.setValue(value);\n}\n<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\n<\/p>\n\n\n\n
In the HTML :<\/p>\n\n\n\n
<div [formGroup]=\"filterFormControls\">\n <custom-select [items]=\"selectItems\" formControlName=\"country\" \n (change)=\"onSelectionChange($event)\">\n <\/custom-select>\n<\/div><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Now, if we transpile the code again…everything will work fine. The formControlName ist binded in component. <\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"Let’s assume we create a custom (angular) Component “custom-select” in a reactive form and want to use it like below: If we yet try to transpile the code, we will get the following errors : “No value accessor for form control with name: ‘country … “ That’s happens because value accessor\u00a0need to be implemented first […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[676,679,675,677,678],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2633"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2633"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2633\/revisions"}],"predecessor-version":[{"id":2653,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2633\/revisions\/2653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}