Angular Reactive Forms FormArray - 无法分配第二个 FormGroup 元素

Question

我正在与 Reactive Forms 和嵌套的 FormArray 作斗争。我正在开发应用程序以显示具有多个地址的客户。 FormArray 应该包含多个地址并使用 *ngFor 我想将它们展示给用户。

一切正常，除了我无法将更多项目添加到 FormArray（地址）即使我在数组中指定了 2 个元素，我仍然只分配了一个。

我的代码有什么问题？

address.component.ts

import { Component, OnInit } from '@angular/core';
import { ClientsService } from '../../../shared/clients.service';
import { FormArray } from '@angular/forms';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {

  constructor(public clientService: ClientsService) { }

  get Addresses(): FormArray{
    return <FormArray>this.clientService.clientForm.get('Addresses');
  }

  ngOnInit(): void {}

}

clients.service.ts

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


@Injectable({
  providedIn: 'root'
})
export class ClientsService {

  constructor(private fb: FormBuilder, private http: HttpClient) { }

  clientForm = this.buildClientData();

  initializeFormGroup() {   
    this.clientForm.patchValue({
      Id: 0,
      CompId: null,
      NIP: null,
      ClientRelation: '',
      CompanyName: '',
      BusinessType: '',
      UsName: '',
      Addresses: [{
        Id: 0,
        Type: 'Company',
        Country: '',
        Wojewodztwo: '',
        Powiat: '',
        Gmina: 'testo',
        City: '',
        StreetName: '',
        StreetNo: '',
        ApartmentNo: '',
        PostalCode: '',
        PostalCity: ''
      },
      {
        Id: 1,
        Type: 'Accomodation',
        Country: '',
        Wojewodztwo: '',
        Powiat: '',
        Gmina: 'testo',
        City: '',
        StreetName: '',
        StreetNo: '',
        ApartmentNo: '',
        PostalCode: '',
        PostalCity: ''
      },
    ],
      Phone: '',
      Active: false,
      Debtor: false,
      Poa: '',
      PoaPayment: ''
    });
    
    console.log(this.clientForm);
  }

  buildClientData(): FormGroup {
    return this.fb.group ({    
      Id: 0,
      CompId: null,
      NIP: null,
      ClientRelation: '',
      CompanyName: '',
      BusinessType: '',
      UsName: '',
      Addresses: this.fb.array([this.buildClientAddress()]),
      Phone: '',
      Active: false,
      Debtor: false,
      Poa: '',
      PoaPayment: ''
    });
  }

  buildClientAddress(): FormGroup {
    return this.fb.group({
      Id: null,
      Type: '',
      Country: '',
      Wojewodztwo: '',
      Powiat: '',
      Gmina: '',
      City: '',
      StreetName: '',
      StreetNo: '',
      ApartmentNo: '',
      PostalCode: '',
      PostalCity: ''
    });
  }
}

Answer 1

您已将一个对象添加到 buildClientAddress 的表单组中。如果您添加两组对象，您将得到另一组对象。

如果你想动态地使用它，你必须在前端提供一些按钮，这样你就可以在该按钮操作下提供你的逻辑。

addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    description: '',
    price: ''
  });
}

Angular Reactive Forms FormArray - 无法分配第二个 FormGroup 元素

Angular Reactive Forms FormArray - cannot assign second FormGroup element

angular

angular-reactive-forms

formarray