如何在不同地方的表单中为 ngModelGroup 设置唯一名称

Question

我有一个组件，选择器是：app-common-component。

基于 ngModelGroup 的 app-common-component :

<fieldset ngModelGroup>
</fieldset>

我有一个表单，它分为两个组件 app-component-a 和 app-component-b

<form>
  <app-component-a></app-component-a>
  <app-component-b></app-component-b>
</form>

app-component-a 包含 app-common-component

<fieldset ngModelGroup="componenta">
  <app-common-component></app-common-component>
</fieldset>

app-component-b 还包含 app-common-component

<fieldset ngModelGroup="componentb">
  <app-common-component></app-common-component>
</fieldset>

我的问题是如何在不同的地方设置 app-common-component 的 ngModelGroup 名称？

我想在下面的表格中看到以下内容：

mainForm
  controls
    componenta
      controls
        unique name of the app-common-component
    componentb
      controls
        unique name of the app-common-component

Answer 1

正如 Andrei 所提到的，您可以使用输入属性来设置唯一名称，或者您可以在通用组件中设置全局变量。然后像这样为每个新实例将其递增 1。

common.component.ts

let uniqueId = 0;

@Component({
  selector: 'app-common-component',
  template: `
   <fieldset [ngModelGroup]="groupName">
   </fieldset>
  `,
})
export class AppCommonComponent  {
  groupName = uniqueId++; 

}

如何在不同地方的表单中为 ngModelGroup 设置唯一名称

How to set unique name to ngModelGroup in the form on different places

forms

nested

ngmodel

angular