将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) {
}
}

我可以在AComponent中使用ControlContainer，但我有太多类似的组件，我不想在每个组件中复制/粘贴这个逻辑。出于同样的原因，我也不想实现ControlValueAccessor。

我试着使用NgControl，但得到了相同的结果。

我怎样才能以最短的方式实现这个逻辑？

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>

以下是stackblitz中的一个示例：https://stackblitz.com/edit/angular-fmhryc