Angular 8: formControlName inside component multiple nested levels below

Question

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 .. />

question is unclear - can you make lives 3 levels above a child more explicit i.e. are these nested components, what is your form? You can make components that pass along whole formgroup values (or mapped values) — Andrew Allen
the <form [formGroup]="..."> lies 3 components above the formControlName in the Dom tree — user12250118
Actually you are not obliged to use formControlName you can simply use formControl.get('path.to.prop') for the controls. — Sergey
hi @Sergey can you write in example, and I can send points? I have Angular 8 by the way;' is it good practice to do what suggested? or more deprecated practice? thanks again — user12250118

yurzui yurzui · Accepted Answer · 2019-11-10T05:14:36

You can consider four options:

1) provide ControlContainer on your component with FormControlName

d.component.ts

@Component({
  ...
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class DComponent implements OnInit {

Ng-run Example

2) create simple directive that provides ControlContainer

@Directive({
  selector: '[provideContainer]',
  providers: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class ProvideContainerDirective {
}

then place this directive somewhere at the top of nodes hierarchy in your

d.component.html

<ng-container provideContainer>
  <input formControlName="someName">
</ng-container>

Ng-run Example

3) use FormControlDirective instead of FormControlName directive

FormControlDirective requires FormControl instance to be passed

<input [formControl]="control">

You can get this instance either though DI:

d.component.ts

export class DComponent implements OnInit {
  control;
  constructor(private parentFormGroupDir: FormGroupDirective) { }

  ngOnInit() {
    this.control = this.parentFormGroupDir.control.get('someName');
  }

Ng-run Example

or use some service that ties your components.

d.component.ts

export class DComponent implements OnInit {
  control: FormControl;

  constructor(private formService: FormService) { }

  ngOnInit() {
    this.control = this.formService.get('someName');
  }

Ng-run Example

4) pass FormGroup as Input props down to the children or get it through DI or service and then wrap your input[formControlName] with formGroup directive

d.component.html

<ng-container [formGroup]="formGroup">
 <input formControlName="..."
</ng-container>

Ng-run Example

Angular 8: formControlName inside component multiple nested levels below

2 Answers