How to get FormControl instance from ControlValueAccessor

Related searches

I've the following component:

@Component({
    selector: 'pc-radio-button',
    templateUrl: './radio-button.component.html',
    providers: [
        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRadioButtonComponent), multi: true}
    ]
})
export class RadioButtonComponent implements ControlValueAccessor {
    ...
}

I can assign and alter the value through these inputs:

<pc-radio-button [formControl]="formControl"></pc-radio-button>
<pc-radio-button [formControlName]="inputControlName"></pc-radio-button>

However I need the component to have the direct access to the assigned formControl, as I need to add styles depending on its status.

By creating an @Input() formControl does not solve the problem. As it does not cover the case when form control is assigned via formControlName.

It looks like injector.get(NgControl) is throwing a deprecation warning, so I wanted to chime in with another solution:

constructor(public ngControl: NgControl) {
  ngControl.valueAccessor = this;
}

The trick is to also remove NG_VALUE_ACCESSOR from the providers array otherwise you get a circular dependency.

More information about this is in this talk by Kara Erickson of the Angular team.

How to get FormControl instance from ControlValueAccessor, ngOnInit() { this.ngControl = this.inj.get(NgControl) } then you can get status like ngControl.control.status See also Access valid value of custom form control� @Component({ selector: 'my-app', template: ` <input [formControl]="ctrl"> ` }) export class AppComponent { ctrl = new FormControl(3); } All form directives, including the formControl directive used above, call the setUpControl function to setup interaction between a formControl and a ControlValueAccessor.

Don't reinvent the wheel when implementing ControlValueAccessor , Reuse already-implemented controlValueAccessor formControlName: string; /* get hold of FormControl instance no matter formControl or� It accepts the string name of the FormControl instance you want to link, and will look for a FormControl registered with that name in the closest FormGroup or FormArray above it. Access the control : You can access the FormControl associated with this directive by using the get method.

Goes from my answer of this stackblitz question

Another solution is add as provider NG_VALIDATORS. So, in our function validate we can store the control in a variable

public validate(c: FormControl) {
  if (!this.control)
    this.control=c;
  return null;

See stackblitz

Get access to FormControl from the custom form , ControlValueAccessor. However, I want to And then you can get form control instance inside your custom form component like this: @Input()� In order to get hold of a ControlValueAccessor for a form control, Angular internaly injects all values that are registered on the NG_VALUE_ACCESSOR token. So all we need to do is to extend the multi-provider for NG_VALUE_ACCESSOR with our own value accessor instance (which is our component). Let’s do that right away:

There is no FormControl instance attached to form control element , Radio button is not getting selected with formControl in it problem using custom form field component (implementing ControlValueAccessor ):. FormControl is used to track values and validation of a form control. It can be used standalone as well as with the parent form. When we work with FormControl class, FormControlDirective and FormControlName directives are also used. FormControlDirective: It syncs a standalone FormControl instance to form a control element.

Adding Integrated Validation to Custom Form Controls in Angular , Although I have already written a detailed article about how to integrate with Angular forms, so first, let's implement the ControlValueAccessor interface: The validate() method will be called with the FormControl instance� content_copy const control = new FormControl ('', {updateOn: 'submit'}); Reset the control back to an initial valuelink. You reset to a specific form state by passing through a standalone value or a form state object that contains both a value and a disabled state (these are the only two properties that cannot be calculated).

It receives a FormControl instance([formControl]="formControlInstance") which is already synced with, because formControlInstance is already part of an existing AbstractControl tree. Therefore, the important thing to do here is just to bind the formControlInstance to the current DOM element by using the value accessor.

Comments
  • This should be the accepted solution in 2019 with Angular 7.
  • Can you please show what's the deprecation warning?
  • FWIW, her presentation is totally worth your time. But if you are looking for the specific NgControl bits it starts around 19:07