使用 FormArray Angular 在 formGroup 中加载数据

Question

我有一个带有 FromGroup 和 FormArray 的动态表单.. 动态表单效果很好，我可以添加新元素等...... 另一方面，在我的表单中默认加载对象列表时遇到问题。例如，如果我有一个包含两个对象的列表，我希望有两种形式及其两个对象的数据......我在这里有一个关于 stackblitz 的例子： https://stackblitz.com/edit/angular-4crhvw

PS：在我的示例 stakblitz 中，我制作了显示元素的示例，但我想显示所有元素

我想要的见附件post

Answer 1

您得到了 1 个元素，因为您在这里只向 formArray 添加了 1 个元素

 this.initFormArray(this.listAddres[0]);

你需要从你的数组这个数组创建一个数组

  listAddres: Adresse[] = [ 
      {label:'labs1', rue :'2', nomRue:'allerte'}, 
      {label:'Olabel', rue :'3', nomRue:'allerte'}
  ];

修改了你的代码检查下面link https://angular-h2v8hx.stackblitz.io

这里是代码片段

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, ValidatorFn, ValidationErrors, FormBuilder } from '@angular/forms';
import { Adresse } from './adresse';
import { addresseValidator } from '../valid-address.directive';

@Component({
  selector: 'app-adresse',
  templateUrl: './adresse.component.html',
  styleUrls: ['./adresse.component.css']
})
export class AdresseComponent implements OnInit {
  addressForm: FormGroup;
  label: FormControl;
  rue: FormControl;
  nomRue: FormControl;
  list: Adresse[] = [];
  adresse: Adresse = new Adresse();
  fa: FormArray;

  listAddres: Adresse[] = [
    { label: 'labs1', rue: '2', nomRue: 'allerte' },
    { label: 'Olabel', rue: '3', nomRue: 'allerte' }
  ];
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.addressForm = new FormGroup({
      adresses: this.formBuilder.array([])
    });
    this.initFormArray(this.listAddres);
  }
  createForms(adresse): FormGroup {
    let formGroup: FormGroup = new FormGroup(
      {
        label: new FormControl(adresse.label),
        rue: new FormControl(adresse.rue),
        nomRue: new FormControl(adresse.nomRue)
      },
      {
        validators: addresseValidator
      }
    );
    return formGroup;
  }

  initFormArray(adresse: Adresse[]) {
    const formArray = this.addressForm.get('adresses') as FormArray;
    adresse.map(item => {
      formArray.push(this.createForms(item));
    });
    this.addressForm.setControl('adresses', formArray);
  }

  get adresses() {
    return this.addressForm.get('adresses') as FormArray;
  }

  add() {
    this.adresses.push(this.createForms(this.adresse));
  }

  finish() {
    this.list = this.addressForm.value
    console.log(this.list);
  }
}

使用 FormArray Angular 在 formGroup 中加载数据

Load data in formGroup with FormArray Angular

angular

form-control

formarray

formgroups