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. What is a good way to allow this to work? Or is Service the only way, or multiple input/outputs?
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 .. />
from Angular 8: formControlName inside component multiple nested levels below
No comments:
Post a Comment