带有ng-template的递归角反应形式

Question

我正在尝试使用ng-template构建递归表单模板。表单结构由配置对象控制，该对象包含应用程序的路由和每个路由的权限。服务使用该对象来构建表单组。因此，每次添加新路由时，我只需要将此新路由添加到config对象即可更新角色表单。

配置对象

 [
  {
    path: 'admin',
    alias: 'admin',
    authorized: false,
    actions: {
      create: false,
      delete: false
    }
  },
    {
    path: 'news',
    alias: 'news',
    authorized: false,
    actions: {
      create: false,
      delete: false
    },
    childRoutes: [
      {
        path: 'sports',
        alias: 'sports news',
        authorized: false,
        actions: {
          create: false,
          delete: false
        }
      },
      {
        path: 'economy',
        alias: 'economy news',
        authorized: false,
        actions: {
          create: false,
          delete: false
        }
      }
    ]
  }
]

最后形成具有下一个结构的表单

formGroup

this.roleForm = this.fb.group({
      admin : this.fb.group({
        authorized: [false],
        create: [false],
        delete: [false],
      }),
      news : this.fb.group({
        authorized: [false],
        create: [false],
        delete: [false],
        childRoutes : this.fb.group({
          sports : this.fb.group({
            authorized: [false],
            create: [false],
            delete: [false]
          }),
          economy : this.fb.group({
            authorized: [false],
            create: [false],
            delete: [false]
          }) 
        })  
      })
    })

然后，我遍历configObject来填充表单的html。如果我使用常规的非递归html，则一切正常。

常规html

<form [formGroup]="roleForm">
  <div *ngFor="let control of configObject">
    <div class="form-group" formGroupName="{{ control.path }}">
      <div class="form-field">
        <p>{{ control.alias }}</p>
        <mat-checkbox formControlName="authorized" [checked]="control.authorized">Access</mat-checkbox>
      </div>
      <div>
        <p>Permissions</p>
        <div class="form-field">
          <mat-checkbox formControlName="create" [checked]="control.create">Add</mat-checkbox>
        </div>
        <div class="form-field">
          <mat-checkbox formControlName="delete" [checked]="control.delete">Delete</mat-checkbox>
        </div>
      </div>

      <div *ngIf="control.childRoutes">
        <div formGroupName="childRoutes">
          <div *ngFor="let childControl of control.childRoutes" formGroupName="{{ childControl.path }}">
            <div class="form-field">
              <p>{{ childControl.alias }}</p> 
              <mat-checkbox formControlName="authorized" [checked]="childControl.authorized">Access</mat-checkbox>
            </div>
            <div>
              <p>Permissions</p>
              <div class="form-field">
                <mat-checkbox formControlName="create" [checked]="childControl.create" >Add</mat-checkbox>
              </div>
              <div class="form-field">
                <mat-checkbox formControlName="delete" [checked]="childControl.delete" >Delete</mat-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

当我尝试使用ng-template使html递归时，问题就来了，因为路由可以具有多个嵌套级别。

递归html

<form [formGroup]="roleForm">
  <div *ngFor="let control of configObject">
    <ng-container *ngTemplateOutlet="roleFormGroup; context: { $implicit: control }"></ng-container>

    <ng-template #roleFormGroup let-control>
        <div class="form-group" formGroupName="{{ control.path }}">
        <div class="form-field">
          <p>{{ control.alias }}</p>
          <mat-checkbox formControlName="authorized" [checked]="control.authorized">Access</mat-checkbox>
        </div>
        <div>
          <p>Permissions</p>
          <div class="form-field">
            <mat-checkbox formControlName="create" [checked]="control.create">Add</mat-checkbox>
          </div>
          <div class="form-field">
            <mat-checkbox formControlName="delete" [checked]="control.delete">Delete</mat-checkbox>
          </div>
        </div>    
        <div *ngIf="control.childRoutes">
          <div formGroupName="childRoutes">
            <div *ngFor="let childControl of control.childRoutes">
              <ng-container *ngTemplateOutlet="roleFormGroup; context: { $implicit: childControl }"></ng-container>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </div>
</form>

并得到下一个错误

  

错误错误：找不到名称为'sports'的控件

     

错误错误：找不到路径为“体育->授权”的控件

     

错误错误：找不到路径为“ sports-> create”的控件

我已经做了demo的测试。

有人知道我该如何解决这个问题？