Questions tagged [controlvalueaccessor]
161 questions
25
votes
1 answer
Inconsistent validation issue in Angular custom component
To show a kind of real world example, let's say that we want to use the @angular/material's datepicker in our application.
We want to use it on a lot of pages, so we want to make it very easy to add it to a form with the same configuration…

Burnee
- 2,453
- 1
- 24
- 28
23
votes
3 answers
Angular: How to temporarily highlight dom elements that have just changed?
Before implementing a solution on my own I would like to know if there is a simple manner to change the style of an element (a brief highlight) when the data bound property value has just change.
There are lot of elements in my DOM so I do not not…

Anthony Brenelière
- 60,646
- 14
- 46
- 58
14
votes
5 answers
Angular Two-Way Data Binding and Watching for Changes in Parent Component
It seems there is no way to watch changes in the parent component when using two-way data binding.
I have a custom input component for collecting a tag list. Two-way data binding is setup and working between this component and its parent.
// the…

Ben Racicot
- 5,332
- 12
- 66
- 130
10
votes
7 answers
Angular reactive form custom control async validation
UPDATE:
Issue with async validation successfully solved. But there is another issue with initial validation state.
See latest answer.
Here is the trick:
Have component with implemented ControlValueAccessor interface to be used as custom…

vbilenko
- 410
- 3
- 11
9
votes
2 answers
Is forwardRef mandatory while creating NG_VALUE_ACCESSOR
I have a custom input component which implements ControlValueAccessor with providers declared as follows. It seems to work fine. In all the tutorials I could find on the internet, forwardRef was being used extensively whenever NG_VALUE_ACCESSOR is…

Surya KLSV
- 1,260
- 4
- 18
- 26
6
votes
2 answers
How To Use A Directive In A Custom Input With ControlValueAccessor Angular
I've been create a simple custom input component in my angular app use ControlValueAccessor. So, when I want to create a form input element, I don't have to call , only call .
I have a problem, when I use , I can use…

Titus Sutio Fanpula
- 3,467
- 4
- 14
- 33
6
votes
1 answer
Error when using Control Value Accessor in Angular
I have implemented Control Value Accessor in my application but when running the application I get the following error message:
ERROR TypeError: dir.valueAccessor.writeValue is not a function
at setUpControl (forms.js:2578)
at…

MazW
- 125
- 2
- 10
5
votes
2 answers
angular validation state of a nested ControlValueAccessor is not correctly propagated in parents, how to implement this validation?
I have an issue in an angular 10 app, with the propagation of the state of a formGroup to its parent, at initialization.
Issue: at component initialization, the validation state of a sub-form is not correctly propagated in parents of more than one…

Louis AMSTUTZ
- 161
- 9
5
votes
2 answers
Passing formControlName into Angular component
I have a reactive form. The setup is similar to this:
myForm: FormGroup;
this.myForm= new FormGroup({
name: new FormControl("", [Validators.required, Validators.maxLength(15), Validators.pattern('...')]),
...
});
I use this…

Sun
- 4,458
- 14
- 66
- 108
4
votes
1 answer
Why is Angular calling `registerOnChange` after `ngOnDestroy` on custom ControlValueAccessor component?
After creating a custom form element, I noticed that when I navigated away from a route that hosted that custom form element, Angular would call the form element's ngOnDestroy method and then it would call the form element's registerOnChange and…

Trevor
- 13,085
- 13
- 76
- 99
4
votes
1 answer
Angular Reactive Form, ControlValueAccessor vs. PropertyBinding
i have some form components which in fact just wrap some parts of a big formular into little pieces. I can imagine two ways to do that: a ControlValueAccessor or s simple PropertyBinding to pass in the FormControl to the…

Christian Jansik
- 321
- 2
- 8
4
votes
1 answer
ControlValueAccessor ngModel not being updated
This is simple custom form control
@Component({
selector: 'app-custom-control',
template: `
{{ value }}
`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting:…
user7003407
4
votes
0 answers
How to implement multiple level (nested) component using ControlValueAccessor
I have a complicate form which need 4~5 levels of nested form.
I have couple of components, all of them implements ControlValueAccessor and the return type is an object array.
Instead of return a FormGroup, is there any way to return a FormArray so…

Neardreams
- 125
- 9
4
votes
5 answers
Angular 7 - ControlValueAccessor - Trim input values that are binded to a form
We have a input field on a web page that must be trimmed at the same time as the user enter that data. As the input is binded to an Angular Form the value in the Form must also be trimmed.
I use Angular 7
import {
Directive,
ElementRef,
…

user286974
- 111
- 1
- 1
- 12
4
votes
1 answer
How do I create a custom Reactive Form Element?
I'm working with Reactive Forms in Angular and I'm trying to create a custom form element so I can use buttons with my form. I'm trying to follow a tutorial from Alligator.io, but it isn't clear how to integrate this into my component. Currently I'm…

London804
- 1,072
- 1
- 22
- 47