Angular反应形式中的嵌套动态数组形式 [英] Nested dynamic array forms in Angular Reactive forms

问题描述

我有一个数组形式，即地址"，一旦用户单击添加地址"按钮，将立即添加一个地址形式，这将是动态的.我实现了一个问题(添加/删除地址"工作正常).现在，我需要添加一个动态联系电话，例如地址.

I'm having a array form namely "address" and this will be a dynamic once the user clicks the "Add Address" button immediately one address form will add. I implemented this with an issue (Add/Remove address works fine). Now I need to add a dynamic contact numbers similar like address.

一个地址可能包含一个或多个电话号码，如果用户单击添加电话号码"，需要在地址表中添加一个新的电话号码表，则所有地址表都将需要该功能. (即数组array =>地址数组，每个地址包含联系人数组)

A address may contain one or more than one phone numbers, if the user clicks "Add Phone number" need to add a new phone number form inside the address form, the functionality will required in all the address forms. (i.e., array of array => array of address and each address contains array of contacts)

StackBlitz中提供了工作代码: https://stackblitz.com/edit/angular-maexn8

Working code is available in 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');
  }

}

请协助我实现动态嵌套数组表单(添加/删除表单).

Kindly assist me how to implement dynamic nested array forms (Add/Remove forms).

推荐答案

您需要根据formGroup或formArrays正确声明.

You need to declare according to the formGroup or formArrays properly.

您可以使用此作为参考.

分叉了您的代码:此处.如上所述，请保持group/array/controls顺序

Forked your code: here. As mentioned above, keep the group/array/controls in order

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>

这篇关于Angular反应形式中的嵌套动态数组形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！