Reusable Input and Select component with Control Value Accessor in Angular

A Control Value Accessor (CVA) is a design pattern used in Angular to create custom form controls. It is a way to extend the functionality of existing form controls, allowing developers to create new controls that meet their specific needs.

In Angular, a form control is a component that manages the state of an input element, such as a textbox or checkbox. A CVA provides a way to create a custom form control that can be used in the same way as the built-in form controls.

To implement a CVA in your design, you can start by creating a new component that extends the base class ControlValueAccessor. This class provides several methods that you will need to implement in your component, including writeValue, registerOnChange, and registerOnTouched.

The writeValue method is used to update the value of the custom form control. The registerOnChange method is used to register a callback function that will be called when the value of the control changes. The registerOnTouched method is used to register a callback function that will be called when the control is touched (i.e., when it receives focus).

Once you have implemented these methods, you can use your custom form control in your application by adding it to your template and binding it to a form control object.

[invictuz]

The most comprehensive resource on CVA, covering custom error component and two custom input components!

[Neotrixstdr]

The best video about Control Value Accesor i have never seen. Thanks!

[dannisenson]

oh man this is quality content. You're the best

[amandaavelino]

Good idea to create a directive to implement all custom form controls. I'd never thought about it (:

[PeterStritzinger]

Many THX! This was exactly what I was looking for.

[jomerverola]

Thankyou sir quality content. And I already saved my problem with the use of ngValue

[vasilemoraru]

very well explained, with a lot of details.

[pazzuto]

Very interesting video. A few things that will come in handy. The question is on the directive you created to extend from. It looks just like a base class - why dioes it have to be a directive, perhaps for the injection of the form directive?

[owenjaspervargas]

This is what I'm looking for! Thank you so much! <3 <3

[RamkumarRavichandran]

am getting error "Maximum call stack size exceeded". FormControl.setValue, InputfieldComponent.writeValue, onChange

[test-user-]

public writeValue(outsideValue: T): void {
if (this.control) {

} else {
this.control = new FormControl(outsideValue);
}
}

there will be a cyclic change in value...

1. change the value of the external control
2. writeValue is called
3. let's take the first step

[jacobadlerman]

So underestimated channel, great job though!

[videoresponse]

so this approach basically gets the formControl from the parent component and places it on the nested input. doesn't a ControlValueAccessor allow us to bypass that? what advantage does this have over simply using HTML's native (change) and then calling the CVA's onChange() function with that value? for example, most documentation I've seen has the registerOnTouched function contain a single line "this.onTouched = fn". why is this one so much more involved? just trying to understand.

this looks amazing and really in-depth I'm just curious why this approach differs so much from other ControlValueAccessor documentation I've seen

[lubezen]

Hi Sebastian. Thanks for the great idea, but how do you reset the select?

[dmitrykruglov]

I have a problem when trying form.reset() from parent component. Maximum call stack size exceeded. Could you check it out please?

[obinnaezedei]

Too many magics! You just have to cram a lot of things. Crazy! Worried about the maintainability

[balvinderrayat]

Great details. Absolutely loved it. Just one request, can you update file for loop as per latest angular version (17)?
While rest of the things are working as expected. But I am getting an error "Type 'Record<string, ValidationErrors>' must have a '[Symbol.iterator]()' method that returns an iterator"

[FabioGomesCG]

When i add the component and use a formGroup, when i reset the form with this.form.reset(); the component causes infinit loop in writeValue function in control-value-acessor, can you have this problem ? Edit: i fix this error: in writeValue function (this.control && this.control.value!=value) resolve to me.

[sivanshlmao]

which extension is that? that autocompletes your codes???

[coding_check]

This is so good! Such great content! Please keep going. Also how can we support you?