时间戳

首页 > 解决方案 > 对象数组的表单控件

html - 对象数组的表单控件

问题描述

{ 
    id: 123,
    email: "abc@gmail.com",
    password: 108,
    myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ] 
}

这就是我从服务器获取字段以进行修补的方式，我正在像这样修补它们：

this.myForm = this.fb.group({
    id: [],
    email: [],
    password: [],
    myObj: [] 
});

而且我需要每个myObjArray 成为一个单独的表单控件。我尝试以不同的方式从 HTML 访问它们，（如formControlName = myObj[0], formControlName = myObj.name ）但没有成功..

如何访问myObjHTML 中的字段？

标签： htmlangulartypescriptprimeng

解决方案

它应该是这样的：

objects: any[] = [];
myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ]

ngOnInit() {
    this.myForm = this.fb.group({
        id: [],
        email: [],
        password: [],
        objects: this.formBuilder.array([]) 
    }); 
this.objects = this.myForm.get('objects') as FormArray;
for(let obj of this.myOj){
    this.objects.push(this.createItem());
    }
}

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

在模板中：

<div formArrayName="objects"
  *ngFor="let item of myForm.get('objects').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="id">
    <input formControlName="name">
    <input formControlName="age">
  </div>
</div>

推荐阅读