Вложенные формы динамического массива в формах Angular Reactive

Question

У меня есть форма массива, а именно «адрес», и она будет динамической, когда пользователь нажмет кнопку «Добавить адрес» сразу, как только одна форма адреса будет добавлена.Я реализовал это с проблемой (Add / Remove address работает нормально).Теперь мне нужно добавить динамические контактные номера, похожие на адреса.

Адрес может содержать один или несколько телефонных номеров, если пользователь нажимает «Добавить номер телефона», необходимо добавить форму нового номера телефона внутриФорма адреса, функциональность будет необходима во всех формах адреса. (т. Е. Массив array => массив адресов и каждый адрес содержит массив контактов)

Рабочий код доступен в StackBlitz: https://stackblitz.com/edit/angular-maexn8

Пример кода:

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { User } from '../../model/user';

@Injectable()
export class UpsertUserFormService {

  public userForm: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.userForm = this._fb.group({
      relation: [],
      title: [],
      firstName: [],
      lastName: [],
      address: this._fb.array([this.addAddressGroup()])
    });
  }

  private addAddressGroup(): FormGroup {
    return this._fb.group({
      street: [],
      city: [],
      state: [],
      pincode: [],
      isPrimary: [],
      contacts: this._fb.array([this.contactsGroup()]) 
    });
  }

  showMessage(obj: any) {
    console.log('Console Item: ',obj)
  }

  private contactsGroup(): FormGroup {
    return this._fb.group({
      phoneNumber: ['9712345678', [Validators.maxLength(10)]], 
    });
  }

  addAddress(): void {
    this.addressArray.push(this.addAddressGroup());
    console.log(this.addressArray);
  }

  removeAddress(index: number): void {
    this.addressArray.removeAt(index);
  }

  get addressArray(): FormArray {
    return <FormArray>this.userForm.get('address');
  }

}

Пожалуйста, помогите мне, как реализовать динамические формы вложенных массивов (Добавить / Удалить формы).

Answer 1

Вы должны заявить в соответствии с formGroup или formArrays правильно.

Вы можете использовать это в качестве ссылки.

Редактировать

Разместил ваш код: здесь .Как уже упоминалось выше, держите group/array/controls в порядке

App.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public userForm: FormGroup;
  constructor(private _fb: FormBuilder) {
    this.userForm = this._fb.group({
      firstName: [],
      lastName: [],
      address: this._fb.array([this.addAddressGroup()])
    });
  }

  private addAddressGroup(): FormGroup {
    return this._fb.group({
      street: [],
      city: [],
      state: [],
      contacts: this._fb.array([])
    });
  }

  addAddress(): void {

    this.addressArray.push(this.addAddressGroup());

    console.log(this.addressArray);
  }

  removeAddress(index: number): void {
    this.addressArray.removeAt(index);
  }

  get addressArray(): FormArray {
    return <FormArray>this.userForm.get('address');
  }

  addContact(index): void {
    
    (<FormArray>(<FormGroup>this.addressArray.controls[index]).controls.contacts).push(this.contactsGroup());
  }

  private contactsGroup(): FormGroup {
    return this._fb.group({
      contactPerson: [],
      phoneNumber: ['9712345678', [Validators.maxLength(10)]], 
    });
  }

  addPhoneNumber(index: number): void {
    this.addressArray[index].contacts.push(this.contactsGroup());
    console.log(this.addressArray[index].contacts);
  }
}

## App.component.html ##

<h3>Users Creation</h3>

<form class="example-form" [formGroup]="userForm">
	<div class="primary-container">
    <input matInput placeholder="First Name" value="" formControlName="firstName">
    <input matInput placeholder="Last Name" value="" formControlName="lastName">
	</div>
	<div class="address-container" *ngFor="let group of addressArray.controls; let i = index;" formArrayName="address">
		<div [formGroupName]='i'>
			<input matInput placeholder="Street" value="" formControlName="street"> 
      <input matInput placeholder="City" value="" formControlName="city">
      <input matInput placeholder="State" value="" formControlName="state">
    
    <div formArrayName='contacts'>
      <div *ngFor="let subgroup of group.controls.contacts.controls; let idx = index;" [formGroupName]="idx">
        <input matInput placeholder="Contact Person" value="" formControlName="contactPerson">
        <input matInput placeholder="Phone Number" value="" formControlName="phoneNumber">
      </div>
      <button mat-raised-button (click)="addContact(i)">Add more Contacts</button>
    </div>
    </div>
  </div>
  <div class="form-row org-desc-parent-margin">
    <button mat-raised-button (click)="addAddress()">Add more address</button>
  </div>
</form>

Answer 2

Попробуйте следующим образом. Передайте индекс для рассматриваемого адреса, прочитайте элемент контактов для этого конкретного адреса и добавьте новую группу контактов.

addPhoneNumber(index: number): void {
    this.addressArray[index].contacts.push(this.contactsGroup());
    console.log(this.addressArray[index].contacts);
}

Надеюсь, это поможет !!!