角反应式FormForm-无法分配第二个FormGroup元素

问题描述

我正在使用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',],Phone: '',Active: false,Debtor: false,Poa: '',PoaPayment: ''
    });
    
    console.log(this.clientForm);
  }

  buildClientData(): FormGroup {
    return this.fb.group ({    
      Id: 0,Addresses: this.fb.array([this.buildClientAddress()]),PoaPayment: ''
    });
  }

  buildClientAddress(): FormGroup {
    return this.fb.group({
      Id: null,Type: '',Gmina: '',PostalCity: ''
    });
  }
}

解决方法

您已将一个对象添加到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: ''
  });
}