Вложенная группа угловых реактивных форм не может показать все поля формы

Question

Когда все выглядит нормально в значениях формы, но некоторая часть формы не отображается.
Посмотрите на часть "Объект 3D"
Я что-то здесь упустил?

У меня естьПопробуйте любой метод, но безуспешно:

*ngFor="let pos of myForm.get(position); let f = index "

и

*ngFor="let scl of myForm.get('obj3d')['controls'].scale; let g = index "

app-component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;

  data = {
    building: "Building A",
    obj3d: [
      {
        asset: "my-assetfile.txt",
        position: {
          x: 1,
          y: 2,
          z: 3
        },
        scale: {
          x: 4,
          y: 5,
          z: 6
        }
      }
    ],
    overlay: [
      {
        asset: "my-secondasset.txt",
        h: 7,
        w: 8,
        x: 9,
        y: 10
      }
    ]
  }


  constructor(private fb: FormBuilder) {
    this.myForm = new FormGroup({
    building: new FormControl(''),
    obj3d: new FormArray([]),
    overlay: new FormArray([])
  });
    this.myForm.patchValue({building: this.data.building})
    this.setObj3d();
    this.setOverlay();
    console.warn(this.data);
  }

  setObj3d() {
    let control = <FormArray>this.myForm.controls['obj3d'];
    this.data.obj3d.forEach(p => {
      control.push(this.fb.group({ 
        asset: p.asset,
        position: this.fb.group({
          x: p.position.x,
          y: p.position.y,
          z: p.position.z
        }), 
        scale: this.fb.group({
          x: p.scale.x,
          y: p.scale.y,
          z: p.scale.z
        })
      }))
    })
  }

  setOverlay() {
    let control = <FormArray>this.myForm.controls['overlay'];
    this.data.overlay.forEach(q => {
      control.push(this.fb.group({
        asset: q.asset,
        h: q.h,
        w: q.w,
        x: q.x,
        y: q.y
      }))
    })
  }

  doSubmit() {
    const form = new FormData();
    console.log(JSON.stringify(this.myForm.value));
  }
}

app-component.html

Floor:

Building:

Object 3D

Asset:

Position

X: Y: Z:

Scale

X: Y: Z:

Overlay

Asset: H: W: X: Y:

Submit

{{myForm.value | json}}

Я ожидал, что все поля формы, как вверх, его показ только, когда я удаляю эту итерацию

 *ngFor="let pos of myForm.get(position); let f = index "

, но это производитнекоторые ошибки:

ERROR
Error: Cannot find control with path: 'obj3d -> 0 -> '

Журнал при отправке в порядке:

{
    "building": "Building A",
    "obj3d": [{
        "asset": "my-assetfile.txt",
        "position": {
            "x": 1,
            "y": 2,
            "z": 3
        },
        "scale": {
            "x": 4,
            "y": 5,
            "z": 6
        }
    }],
    "overlay": [{
        "asset": "my-secondasset.txt",
        "h": 7,
        "w": 8,
        "x": 9,
        "y": 10
    }]
}

Демонстрационный код

Любая помощь будет признательна

Answer 1

Проблема решена, просто удалите привязку

   <div formArrayName="obj3d">
  <div *ngFor="let obj of myForm.get('obj3d').controls; let k=index">
    <fieldset>
    <legend><h4>Object 3D</h4></legend>
    <div [formGroupName]="k">
      <label>Asset:</label><input formControlName="asset" />
        <div formGroupName="position">
        <fieldset>
        <legend><h4>Position</h4></legend>
            <label>X:</label><input formControlName="x"/>
            <label>Y:</label><input formControlName="y"/>
            <label>Z:</label><input formControlName="z"/>
        </fieldset>
      </div>
      <div formGroupName="scale">
        <fieldset>
        <legend><h4>Scale</h4></legend>
            <label>X:</label><input formControlName="x"/>
            <label>Y:</label><input formControlName="y"/>
            <label>Z:</label><input formControlName="z"/>
        </fieldset>
      </div>
    </div>
    </fieldset>

  </div>
</div>