Angular Реактивные формы с вложенными массивами форм

Ответ 1

Это не сильно отличается от того, чтобы иметь вложенный formarray. В основном вы просто дублируете код, который у вас есть... с вложенным массивом :) Итак, вот пример:

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    // you can also set initial formgroup inside if you like
    companies: this.fb.array([])
  })
}

addNewCompany() {
  let control = <FormArray>this.myForm.controls.companies;
  control.push(
    this.fb.group({
      company: [''],
      // nested form array, you could also add a form group initially
      projects: this.fb.array([])
    })
  )
}

deleteCompany(index) {
  let control = <FormArray>this.myForm.controls.companies;
  control.removeAt(index)
}

Итак, это добавление и удаление для самого внешнего массива форм, поэтому добавление и удаление групп форм во вложенном массиве форм просто дублирует код. Откуда из шаблона мы передаем текущую группу форм, в какой массив вы хотите добавить (в данном случае) новый проект/удалить проект.

addNewProject(control) {
  control.push(
    this.fb.group({
      projectName: ['']
  }))
}

deleteProject(control, index) {
  control.removeAt(index)
}

И шаблон тем же способом, вы итерируете свой внешний формат, а затем внутри этого итерируете свой внутренний массив форм:

<form [formGroup]="myForm">
  <div formArrayName="companies">
    <div *ngFor="let comp of myForm.get('companies').controls; let i=index">
    <h3>COMPANY {{i+1}}: </h3>
    <div [formGroupName]="i">
      <input formControlName="company" />
      <button (click)="deleteCompany(i)">
         Delete Company
      </button>
      <div formArrayName="projects">
        <div *ngFor="let project of comp.get('projects').controls; let j=index">
          <h4>PROJECT {{j+1}}</h4>
          <div [formGroupName]="j">
            <input formControlName="projectName" />
            <button (click)="deleteProject(comp.controls.projects, j)">
              Delete Project
            </button>
          </div>
        </div>
        <button (click)="addNewProject(comp.controls.projects)">
          Add new Project
        </button>
      </div>
    </div>
  </div>
</div>

DEMO

EDIT:

Чтобы установить значения для вашей формы, когда у вас есть данные, вы можете вызвать следующие методы, которые будут выполнять итерацию ваших данных и устанавливать значения для вашей формы. В этом случае data выглядит так:

data = {
  companies: [
    {
      company: "example comany",
      projects: [
        {
          projectName: "example project",
        }
      ]
    }
  ]
}

Мы вызываем setCompanies, чтобы установить значения для нашей формы:

setCompanies() {
  let control = <FormArray>this.myForm.controls.companies;
  this.data.companies.forEach(x => {
    control.push(this.fb.group({ 
      company: x.company, 
      projects: this.setProjects(x) }))
  })
}

setProjects(x) {
  let arr = new FormArray([])
  x.projects.forEach(y => {
    arr.push(this.fb.group({ 
      projectName: y.projectName 
    }))
  })
  return arr;
}

Ответ 2

Вот что я сделал Я использовал angularflexlayout и angular материал, вы можете использовать любую библиотеку, просто хотел показать вам функциональность

     <form [formGroup]="editForm" novalidate fxLayout="column"
        autocomplete="off">

    <div fxLayout="row wrap" fxLayoutGap="2em">
      <mat-form-field [fxFlex]="30">
        <mat-label>Name</mat-label>
        <input matInput formControlName="name" width="800px"/>
      </mat-form-field>

    </div>
    <div fxLayout="column" fxLayoutGap="3em">
      <div fxLayout="row wrap" fxFlex="40" fxLayoutGap="2em">
        <div formArrayName="phones" fxFlex="50" fxLayoutGap="8px" *ngFor="let phone of Phones.controls;let i= index">
          <mat-form-field fxFlex="100" [formGroupName]="i">
            <mat-label>Phone</mat-label>
            <input matInput formControlName="phone"/>
          </mat-form-field>
        </div>
        <button type="button" mat-stroked-button color="primary" (click)="addPhone()">add</button>
      </div>
      <div fxLayout="row wrap" fxFlex="40" fxLayoutGap="2em">
        <div formArrayName="emails" fxFlex="50" fxLayoutGap="8px" *ngFor="let email of Emails.controls;let i= index">
          <mat-form-field fxFlex="100" [formGroupName]="i">
            <mat-label>Email</mat-label>
            <input matInput formControlName="email"/>
          </mat-form-field>
        </div>
        <button type="button" mat-stroked-button color="primary" (click)="addEmail()">add</button>
      </div>
    </div>

    <div class="mr-2" fxLayoutAlign="end" mat-dialog-actions>
      <button type="button" (click)="cancelDialog()" mat-button
              mat-dialog-close>Cancel
      </button>

      <button type="button" (click)="onSubmit()"
              mat-raised-button
              color="primary">
        Submit
      </button>
    </div>

  </form>

тогда angular контроллер

  editForm: FormGroup;
  phones: FormArray;
  emails: FormArray;

  createForm() {
    this.editForm = this.fb.group({
      name: [''],
        phones: this.fb.array([this.createPhone()]),
      emails: this.fb.array([this.createEmail()]),
     });

  }

  get Phones() {
    return this.editForm.get('phones') as FormArray;
  }

  get Emails() {
    return this.editForm.get('emails') as FormArray;
  }

 createPhone() {
    return this.fb.group(({
      phone: '',
    }));
  }

  createEmail() {
    return this.fb.group(({
      email: ''
    }));
  }


  addPhone(): void {
    this.phones = this.editListingForm.get('phones') as FormArray;
    this.phones.push(this.createPhone());
  }

  addEmail(): void {
    this.emails = this.editListingForm.get('emails') as FormArray;
    this.emails.push(this.createEmail());
  }