Questions tagged controlvalueaccessor

Explore the latest questions and answers asked by our top developers.

Emit event to component when validators are cleared

I have created a custom input component. Its label is displayed when there is a required constraint (computed in OnInit). @Component({ selector: ‘custom-input’, template: `<div *ngIf="isMandatory()">Mandatory</div><input/>` }) export class CustomInput implements ControlValueAccessor, OnInit { mandatory = false; constructor( @Self() @Optional() public ngControl: NgControl ) { super(ngControl); } ngOnInit(): void { this.mandatory = this.isMandatory(); } public […]

Angular Reactive Forms vs ngModel, which has better performance?

I am trying to understand which of the two have better performance, I guess the type of form is important for the response, in my case I am trying to create some ControlValueAccessor components that contain a mat-autocomplete field each, the goal is to use it inside a bigger reactive form element, I would like […]

Angular – Adding/removing class inside control value accesor

I have a reactive form with bootstrap in this way: <form [formGroup]="form"> <div class="mb-3"> <label for="user">Username</label> <input type="text" class="form-control" id="user" placeholder="Insert Username" formControlName=’user’ [ngClass]="{‘is-invalid’: form.get(‘user’).invalid && (form.get(‘user’).touched || form.get(‘user’).dirty), ‘is-valid’: form.get(‘user’).valid}" > </div> </form> And with a custom component using control value accesors turns to: <form [formGroup]="form"> <custom-input formControlName="user"></custom-input> </form> How can i apply the […]

Angular Unit Test: Error: No value accessor for form control

I am abstracting each field from my form as follows (this works in development but not in my unit test) // required.control.ts import { FormControl, Validators } from ‘@angular/forms’; export class RequiredControl extends FormControl { protected textErrors: { [key: string]: string } = { required: ‘Mandatory field’ }; constructor(value: string | any = ”) { […]

Nested angular reactive form components but add FormControls flat on parent form

So I basically I have a large form and want to split it up into multiple sub-form components. Nothing special so far. Consider this target data structure: { additionalProps: { prop1: any prop2: any, … } modifierType: enum, modifierProp1: any, modifierProp2: any, modifierProp3: any, … } Depending on which modifierType I select I can get […]

Angular custom FormControl with updateOn blur

I have a reactive form group which is working just fine with updateOn submit and updateOn change. But when I switch to updateOn blur, the required error is triggered directly after entering a character in my custom form control and never goes away. Also, when I submit my form, all the values of my custom […]

Angular V11: NullInjectorError: No provider for ControlContainer

I have a custom input made in accordance to this article: dont-reinvent-the-wheel. Here is my code, it is in strict mode ▼ // input.component.ts import { Component, Input, ViewChild } from ‘@angular/core’; import { ControlContainer, ControlValueAccessor, FormControl, FormControlDirective, NG_VALUE_ACCESSOR } from ‘@angular/forms’; import { FloatLabelType, MatFormFieldAppearance } from ‘@angular/material/form-field’; @Component({ selector: ‘app-input’, templateUrl: ‘./input.component.html’, […]

Angular11 dir.valueAccessor is null

I have two components that inherits from an abstract base component. @Component({ template: "" }) export abstract class BaseComponent<TModel> implements OnInit, ControlValueAccessor { @Input() isOpen: boolean = false; writeValue(value: boolean) { if (value != null) { this.isOpen = value; } } propagateChange = (_: any) => { }; registerOnChange(fn) { this.propagateChange = fn; } registerOnTouched() […]

create some adaptor to match the 3rd party inputs and outputs

I have one 3rd party component that accepts array[object] in ngModel and does changes in that. I’m using it for just single value, so I want it just to accept object. I have written a component with ControlValueAccessor. That makes change input and output. its an Autocomplete select. The problem here is when I select […]

By HPSingh
Categorized as angular, controlvalueaccessor Tagged ,

Angular – ControlValueAccessor: Nested registerOnChange is not called, but the FormControlValues is still updating

I am trying to develop a template for custom Forms. The goal ist, that the Form gets build dynamically from a XML-File (this far I just create the Input-Elements in the App-Component for testing reasons). The Inputs are sometimes nested in different Groups. Therefor I have a Form-Group Component and a generic Form-Element Component. I […]

1 2 3 6

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us