我有一个带有 FromGroup 和 FormArray 的动态表单。动态表单运行良好,我可以添加新元素等。另一方面,我在表单中默认加载对象列表时遇到问题。例如,如果我有一个包含两个对象的列表,我希望有两个表单及其两个对象的数据......我在这里有一个关于 stackblitz 的示例: https ://stackblitz.com/edit/angular-4crhvw
PS:在我的示例 stakblitz 中,我制作了显示元素的示例,但我想显示所有元素
将我要发布的内容作为附件查看
我有一个带有 FromGroup 和 FormArray 的动态表单。动态表单运行良好,我可以添加新元素等。另一方面,我在表单中默认加载对象列表时遇到问题。例如,如果我有一个包含两个对象的列表,我希望有两个表单及其两个对象的数据......我在这里有一个关于 stackblitz 的示例: https ://stackblitz.com/edit/angular-4crhvw
PS:在我的示例 stakblitz 中,我制作了显示元素的示例,但我想显示所有元素
将我要发布的内容作为附件查看
您将获得 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);
}
}