Using this resource, I want to implement formControlName up multiple nested levels.
Angular 2 - formControlName inside component
Say the actual formGroup lives 3 component levels above a child formControlName component,
ControlValueAccessor works if the Parent component is right next to child. However multiple levels above (grandfather) form does not work.
Is there an alternative to Service, or multiple input/outputs ? Or are these the only method?
A--> Component with formGroup
B---> Component container
C---> Component container
D ---> Component with FormControlName (should pass to Component A)
Component A will collect multiple form control names from different children components similar to this,
InputText.ts
export class InputTextComponent implements AfterViewInit, ControlValueAccessor {
@Input() disabled: boolean;
@Output() saveValue = new EventEmitter();
value: string;
onChange: () => void;
onTouched: () => void;
writeValue(value: any) {
this.value = value ? value : "";
}
registerOnChange(fn: any) {this.onChange = fn}
registerOnTouched(fn: any) {this.onTouched = fn}
setDisabledState(isDisabled) {this.disabled = isDisabled}
}
InputText.html
<input .. />
formControlName
you can simply useformControl.get('path.to.prop')
for the controls. – Sergey