Get access to FormControl from the custom form component in Angular
Solution 1:
This solution was born from the discussion in the Angular repository. Please, make sure to read it or even better to participate if you are interested in this problem.
I've studied the code of FormControlName
directive and it's inspired me to write the following solution:
@Component({
selector: 'my-custom-form-component',
templateUrl: './custom-form-component.html',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: CustomFormComponent,
multi: true
}]
})
export class CustomFormComponent implements ControlValueAccessor, OnInit {
@Input() formControlName: string;
private control: AbstractControl;
constructor (
@Optional() @Host() @SkipSelf()
private controlContainer: ControlContainer
) {
}
ngOnInit () {
if (this.controlContainer) {
if (this.formControlName) {
this.control = this.controlContainer.control.get(this.formControlName);
} else {
console.warn('Missing FormControlName directive from host element of the component');
}
} else {
console.warn('Can\'t find parent FormGroup directive');
}
}
}
I'm injecting the parent FormGroup
to the component and then getting the specific FormControl
from it using control name obtained through formControlName
binding.
However, be advised, that this solution is tailored specifically for the use case where FormControlName
directive is used on host element. It won't work in other cases. For this you will need to add some additional logic. If you think, that this should be addressed by Angular, make sure to visit the discussion.
Solution 2:
Using formControlName
as an input parameter doesn't work when binding via the [formControl]
directive.
Here is a solution that works both ways without any input parameters.
export class MyComponent implements AfterViewInit {
private control: FormControl;
constructor(
private injector: Injector,
) { }
// The form control is only set after initialization
ngAfterViewInit(): void {
const ngControl: NgControl = this.injector.get(NgControl, null);
if (ngControl) {
this.control = ngControl.control as FormControl;
} else {
// Component is missing form control binding
}
}
}