使用FormArray Angular在formGroup中加载数据-Java 学习之路

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

PS：在我的例子中stakblitz我做了一个示例来显示一个元素，但我想显示所有元素

以附件形式查看我要发布的内容

1 回答

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

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

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

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

修改了您的代码检查以下链接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);
  }
}

回复于 2024-04-26T18:21:34+08:00

使用FormArray Angular在formGroup中加载数据

1 回答

相关问题