ReactiveForms với các mẫu đệ quy động

Đây là vấn đề của tôi.

Ví dụ trực tuyến về vấn đề

Tôi có một JSON động mà tôi cần chuyển đổi thành một biểu mẫu. Vì vậy, tôi đã sử dụng các biểu mẫu phản ứng và bằng cách đi qua tất cả các thuộc tính của JSON, tôi tạo một Formgroup hoặc FormControl, theo cách này:

sampleJson ={prop1:"value1", prop2: "value2",...}

...

  myForm: FormGroup;
  myKeys=[];
    ...

  ngOnInit() {
    this.myForm = this.getFormGroupControls(this.sampleJson, this.myKeys);

  }

getFormGroupControls(json:any,keys): FormGroup{
    let controls = {};
    let value = {};

    for (let key in json) {
      if (json.hasOwnProperty(key)) {

        value = json[key];
        if (value instanceof Object && value.constructor === Object) {

          keys.push({"key":key,children:[]});
          controls[key] = this.getFormGroupControls(value,keys[keys.length-1].children);
        } else {

          keys.push({"key":key,children:[]});
          controls[key] = new FormControl(value);

        }
      }
    }

    return new FormGroup(controls);
  }

Sau khi làm như vậy, tôi sử dụng các mẫu đệ quy để xây dựng biểu mẫu, nếu tôi không sử dụng các mẫu đệ quy, tôi sẽ nhận được biểu mẫu để làm việc. Tuy nhiên với các mẫu đệ quy tôi đang gặp lỗi:

<form [formGroup]="myForm">

  <div class="form-group">


    <ng-template #nodeTemplateRef let-node>

      <div class="node">
        <div  *ngIf="node.children.length">
          {{"section [formGroupName]="}} {{ getNodeKey(node) }}
          <section style="display:block;margin:20px;border:solid 1px blue;padding-bottom: 5px;"
            [formGroupName]="getNodeKey(node)" >
            <h1>{{ node.key }}</h1>
            <ng-template
              ngFor
              [ngForOf]="node.children"
              [ngForTemplate]="nodeTemplateRef">
            </ng-template>
          </section>
          {{"end of section"}}
        </div>
        <div  *ngIf="!node.children.length">
          <label [for]="node.key">{{node.key}}</label>&nbsp;
          <input  type="text" [id]="node.key"
                  class="form-control">
        </div>
      </div>

    </ng-template>

    <ng-template *ngFor="let myKey of myKeys"
                 [ngTemplateOutlet]="nodeTemplateRef"
                 [ngTemplateOutletContext]="{ $implicit: myKey   }">
    </ng-template>

  </div>

CựuComponent.html: 25 Lỗi LRI: Không thể tìm thấy điều khiển với tên: 'đường'

Điều đó tương ứng với JSON mẫu này:

"address": {
        "town": "townington",
        "county": "Shireshire",

        "road": {
          "number": "1",
          "street": "the street"
        }

Tôi đã được hiển thị, vì vậy tôi biết các yếu tố ở đó. Tôi đang thiếu gì?

Hoặc nếu bạn vẫn muốn phân cấp nhóm biểu mẫu / điều khiển, bạn có thể sử dụng các lệnh của formgroup và formControl bằng cách chuyển chúng theo cách đệ quy (thay vì formgroupName và formControlName)

Liên kết ngăn xếp

NB: cùng một vấn đề ở đây: ReactiveForm đệ quy không thể tìm thấy formgroup bên trong mẫu

Vấn đề với mã hiện tại của bạn dường như là ng-template cha là thành phần ứng dụng của bạn, vì vậy nó không tính đến các formgroupNames khác trong các mẫu hàng đầu bạn đã xác định và luôn tìm kiếm trong Formgroup gốc.

Dường như tên nhóm / tên điều khiển đầy đủ không được hỗ trợ trong các mẫu (ví dụ: không thể sử dụng formGroupName="address.road")

Nếu bạn cần một số lý do formgroup - bạn có thể chuyển chúng trong ngữ cảnh cho các mẫu. Hoặc bạn có thể giải quyết trực tiếp formControls:

• xóa tất cả formGroupNamekhỏi mẫu
• lưu trữ fullPath: keys.push({"key":key,children:[], fullKey: parent ? parent.fullKey + '.' + key: key});(bạn cũng có thể lưu trữ FormControlví dụ.)
• và sử dụng nó: <input type="text" [formControl]="myForm.get(node.fullKey)"

Ví dụ về Stackblitz