使用角度6中的反应形式的递归形式(树视图)

Question

我从下面了解递归元素(树视图)的概念.

链接1

在我的情况下,我想用它与表格; 让我们说递归的简单文本输入.表单的JSON结构如下.

JOSN结构

我准备下面的代码.我通过执行下面的代码得到最大调用堆栈大小超过错误.

下面是我的component.html文件.

<form [formGroup]="testForm" (ngSubmit)="onSubmit()">
    <div formArrayName="element">
        <ng-template #recursiveList let-list>       
              <div *ngFor="let item of testForm.get('element').controls;let i=index;">     
                  <div [formGroupName]="i">
                    <input type="text" formControlName="type">
                  </div> 
                  <!-- {{item.get('element')?.controls?.length}} -->
                  <div *ngIf="item.get('element')?.controls?.length > 0">          
                    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('element').controls }"></ng-container>
                  </div>
              </div>          
        </ng-template>
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('element').controls }"></ng-container>
    </div>     

这是component.ts文件.

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators, FormBuilder, FormArray} from '@angular/forms';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: [
      './test.component.scss'
    ]
  })
export class TestComponent implements OnInit{
    testForm:FormGroup;
    element:any;

constructor(private formBuilder: FormBuilder) { }
ngOnInit() {

this.testForm=this.formBuilder.group({
  element:this.formBuilder.array([
    this.formBuilder.group({
      type:'',
      element:this.formBuilder.array([
        this.formBuilder.group({
          type:'',
          element:this.formBuilder.array([                
          ])
        })
      ])        
    })
  ])
})
}

onSubmit() {       
    console.log(this.testForm.value);
}
}

Answer 1

实际上，Bhavik Patel的答案将解决以下错误问题：

超出最大呼叫堆栈大小

但是由于Angular反应性表单的工作方式，您的表单绑定无法正常工作。它依赖于依赖注入树，此模板看起来像：

FormGroup(testForm)
  |__ FormArrayName('element')
           |___ FormGroupName('0')
           |     ....
           |___ FormGroupName(n)

您将始终仅在顶级控件上获得更新。

要解决此问题，您可以定义一些前缀，这些前缀将在嵌入式视图中更新。然后使用该前缀formGroup在树的每个级别上进行定义：

FormGroup(testForm)
  |__ FormArrayName('element')
           |___ FormGroupName('0')
           |     ....
           |___ FormGroupName(n)

Ng运行示例