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，但是我有太多相似的组件，因此我不想在每个逻辑组件中复制/粘贴此逻辑。我也不想出于同样的原因实现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>

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

将formGroupName传递给子组件

1 个答案: