Передайте formGroupName дочернему компоненту

Question

У меня есть следующая форма:

form = this.fb.group({
  a: this.fb.group({
    b: ''
  })
});

Я хотел бы разделить форму на несколько компонентов, например:

<form [formGroup]="form">
  <app-a formGroupName="a"></app-a>
</form>

Но это невозможно, так как мой AComponent делает не реализовать ControlValueAccessor.

Я знаю о ControlContainer, но это дает мне саму форму. Я просто хочу взять FormGroup по ее имени. Я попытался создать директиву, которая будет принимать управление от ControlContainer по его имени, но я не могу понять, как передать его из директивы в мой компонент:

@Directive({
  selector: '[appFormGroupName]',
  providers: [{
    provide: FormGroup,
    useFactory: (controlContainer: ControlContainer, {name}: FormGroupNameDirective) => controlContainer.control[name] as FormGroup, // This doesn't work — FormGroupNameDirective is undefined
    deps: [ControlContainer, FormGroupNameDirective]
  }]
})
export class FormGroupNameDirective {

  @Input('appFormGroupName') name: string;

  constructor(@Host() @SkipSelf() parent: ControlContainer) {
  }

}

Я мог бы использовать ControlContainer в моем AComponent, но у меня слишком много похожих компонентов, и я не хочу копировать / вставлять эти логи c в каждый из них. Я также не хочу реализовывать ControlValueAccessor по тем же причинам.

Я пытался использовать NgControl, но у меня тот же результат.

Как мне добиться этой логики c самым коротким способом?

Answer 1

Вы можете передать form и controlName вашему дочернему компоненту.

В вашем примере это будет выглядеть так:

<form [formGroup]="form">
    <app-a controlName="a" [form]="form"></app-a>
</form>

Их в компоненте AppA:

// .ts
@Input controlName: string;
@Input form: FormControl;

// .html
<div [formGroup]="form">
  <input [formControlName]="controlName"/>
</div>

Вот пример из стекаблиц: https://stackblitz.com/edit/angular-fmhryc