Angular 6 - Многоуровневая вложенная реактивная форма дублирует входы

Question

У меня есть проблема, связанная с угловой реактивной формой, с которой я не могу разобраться.

код

form.html и form.ts

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
import {ProcessService} from "../../../service/process.service";


@Component({
  selector: 'app-check-order-form',
  templateUrl: './check-order-form.component.html',
  styleUrls: ['./check-order-form.component.css']
})
export class CheckOrderFormComponent implements OnInit {
  submitted = false;

  X: FormGroup = this._fb.group({
    field: '',
    Y: this._fb.array([])
  });

  Yg: FormGroup = this._fb.group({
    subfield: '',
    Z: this._fb.array([])
  });

  Zg: FormGroup = this._fb.group({
    subsubfield: ''
  });

  constructor(private _fb: FormBuilder) {
  }

  ngOnInit() {
    this.createYg();
    this.createZg();
  }

  ngOnChanges() {
  }

  onSubmit(formValue) {
    this.submitted = true;
    console.warn(this.X.value);
  }

  createYg() {
    return this.Yg;
  }

  createZg() {
    return this.Zg;
  }

  
  get Y(): FormArray {
    return this.X.get('Y') as FormArray;
  }

  getCurrentZ(index): FormArray {
    return this.Y.at(index).get('Z') as FormArray;
  }
  
  addY(): void {
    this.Y.push(this.createYg());
  }

  addZ(index): void {
    let Z = this.Y.at(index).get('Z') as FormArray;
    Z.push(this.createZg());
  }


  deleteY(index) {
    this.Y.removeAt(index);
  }

  deleteZ(Yindex, index) {
    this.getcurrentZ(Yindex).removeAt(index);
  }
}

<form class="form-inline" [formGroup]="X" (ngSubmit)="onSubmit(X.value)">
  
  <div class="form-group col-3 mb-2">
    <label for="field">Field</label>
    <input type="text" class="form-control" formControlName="field" id="field">
  </div>

  <div class="form-inline" formArrayName="Y">
    <div *ngFor="let y of Y?.controls; let k=index">
      <hr/>
      <div [formGroupName]="k" class="row pt-1 pb-1">
        <div class="col-12">
          <label>Y {{k + 1}}</label>
        </div>
        <div class="form-group col-3 mb-2">
          <input type="text" class="form-control" formControlName="subfield" placeholder="subfield">
        </div>
        <div class="form-inline" formArrayName="Z">
          <div *ngFor="let fondo of getCurrentZ(k)?.controls; let j=index">
            <hr class="bg-secondary"/>
            <div [formGroupName]="j" class="pt-1 pb-1">
              <label>Z {{j + 1}}</label>
              <div class="form-group col-3 mb-2">
                <input type="text" class="form-control" formControlName="subsubfield" placeholder="subsubfield">
              </div>        
              <div class="form-group col-3 mb-2">
                <button (click)="deleteZ(k, j)" class="btn btn-danger mr-1">Remove</button>
              </div>
            </div>
          </div>
        </div>        

        <div class="form-group col-12 mb-2 pr-1">
          <button class="btn btn-info mr-1" (click)="addZ(k)">+ Z</button>
        </div>
        <div class="form-group col-12 mb-2 pr-1">
          <button (click)="deleteY(k)" class="btn btn-danger mr-1">
            Remove
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group col-12 mt-2">
    <button type="submit" class="btn btn-primary mr-2">Submit</button>
    <button (click)="addY()" class="btn btn-success">+ Y</button>
  </div>
</form>

Задача

Вот шаги, которые приводят к проблеме (пожалуйста, посмотрите код выше, пожалуйста):

1. Я нажимаю кнопку + Y, чтобы добавить Y FormGroup
2. я нажимаю в другой раз на + Y
3. Я нажимаю + Z на одном из двух Y FormGroup

Результат : Z FormGroup визуализируется на обоих элементах Y.

Для меня идеальным является то, что каждая FormGroup связана только с родительской группой для правильной компиляции формы. Я пробовал много решений, но не могу найти проблему, несмотря на спецификацию индекса родительского массива (Y).

Заранее спасибо.

Answer 1

Пожалуйста, проверьте код, и я добавил рабочий модуль в https://angular -4dt3sa.stackblitz.io или с кодом https://stackblitz.com/edit/angular-4dt3sa?file=src%2Fapp%2Fapp.component.ts

HTML-контент

<form class="form-inline" [formGroup]="X" (ngSubmit)="onSubmit(X.value)">

  <div class="form-group col-3 mb-2">
    <label for="field">Field</label>
    <input type="text" class="form-control" formControlName="field" id="field">
  </div>

  <div class="form-inline" formArrayName="Y">
    <div *ngFor="let y of Y?.controls; let k=index">
      <hr/>
      <div> test {{k}}</div>
      <div [formGroupName]="k" class="row pt-1 pb-1">
        <div class="col-12">
          <label>Y {{k + 1}}</label>
        </div>
        <div class="form-group col-3 mb-2">
          <input type="text" class="form-control" formControlName="subfield" placeholder="subfield">
        </div>
        <div class="form-inline" formArrayName="Z">
          <div *ngFor="let fondo of getCurrentZ(k)?.controls; let j=index">
            <hr class="bg-secondary"/>
            <div [formGroupName]="j" class="pt-1 pb-1">
              <label>Z {{j + 1}}</label>
              <div class="form-group col-3 mb-2">
                <input type="text" class="form-control" formControlName="subsubfield" placeholder="subsubfield">
              </div>        
              <div class="form-group col-3 mb-2">
                <button (click)="deleteZ(k, j)" class="btn btn-danger mr-1">Remove</button>
              </div>
            </div>
          </div>
        </div>        

        <div class="form-group col-12 mb-2 pr-1">
          <button class="btn btn-info mr-1" (click)="addZ(k)">+ Z</button>
        </div>
        <div class="form-group col-12 mb-2 pr-1">
          <button (click)="deleteY(k)" class="btn btn-danger mr-1">
            Remove
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group col-12 mt-2">
    <button type="submit" class="btn btn-primary mr-2">Submit</button>
    <button (click)="addY()" class="btn btn-success">+ Y</button>
  </div>
</form>

машинопись

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

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

  X: FormGroup = this._fb.group({
    field: '',
    Y: this._fb.array([])
  });

  Yg: FormGroup = this._fb.group({
    subfield: '',
    Z: this._fb.array([])
  });

  Zg: FormGroup = this._fb.group({
    subsubfield: ''
  });

  constructor(private _fb: FormBuilder) {
  }

  ngOnInit() {
    this.createYg();
    this.createZg();
  }

  ngOnChanges() {
  }

  onSubmit(formValue) {
    this.submitted = true;
    console.warn(this.X.value);
  }

  createYg() {
    return this._fb.group({
      subfield: '',
      Z: this._fb.array([])
    });
  }

  createZg() {
    return this._fb.group({
      subsubfield: ''
    });
  }


  get Y(): FormArray {
    return this.X.get('Y') as FormArray;
  }

  getCurrentZ(index): FormArray {
    return this.Y.at(index).get('Z') as FormArray;
  }

  addY(): void {
    this.Y.push(this.createYg());
  }

  addZ(index): void {
    let Z = this.Y.at(index).get('Z') as FormArray;
    let Zg = this.createZg();
    Z.push(Zg);
  }


  deleteY(index) {
    this.Y.removeAt(index);
  }

  deleteZ(Yindex, index) {
    let Z = this.Y.at(Yindex).get('Z') as FormArray;
    Z.removeAt(index);
  }
}

Как упомянуто LP154. Вы не должны создавать новый объект. @ Teskin

Answer 2

Когда вы добавляете форму Y (и форму Z), вы не создаете новый объект, а используете его снова и снова (Yg и Zg). Таким образом, когда вы добавляете «новую» Z к форме Y, на каждую форму Y влияют, потому что они одинаковы.

Удалите Yg и Zg и замените createYg() и createZg() следующим:

  createYg() {
    return this._fb.group({
      subfield: '',
      Z: this._fb.array([])
    });
  }

  createZg() {
    return this._fb.group({
      subsubfield: ''
    });
  }