无法将值修补到FormArray resultList
。
谁能告诉我,我错过了什么?
TS文件:
import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'app-container',
templateUrl: './container.component.html',
styleUrls: ['./container.component.css']
})
export class ContainerComponent implements OnInit {
studList: Student[] = [];
myform: FormGroup = new FormGroup({
firstName: new FormControl('', [Validators.required, Validators.minLength(4)]),
lastName: new FormControl(),
gender: new FormControl('male'),
dob: new FormControl(),
qualification: new FormControl(),
resultList: new FormArray([])
});
onSave() {
let stud: Student = new Student();
stud.firstName = this.myform.get('firstName').value;
stud.lastName = this.myform.get('lastName').value;
stud.gender = this.myform.get('gender').value;
stud.dob = this.myform.get('dob').value;
stud.qualification = this.myform.get('qualification').value;
this.studList.push(stud);
this.myform.controls.resultList.patchValue(this.studList);
console.log(JSON.stringify(this.studList));
}
ngOnInit() {
}
}
型号:
export class Student {
public firstName: String;
public lastName: string;
public gender: string;
public dob: string;
public qualification: string;
}
超文本标记语言:
<div class="container">
<h3>Striped Rows</h3>
<table class="table table-striped" formArrayName="resultList">
<thead>
<tr>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
<td><p formControlName="firstName"></p></td>
</tr>
</tbody>
</table>
</div>
this.studList JSON:
[
{
"firstName":"santosh",
"lastName":"jadi",
"gender":"male",
"dob":"2018-03-31T18:30:00.000Z",
"qualification":"BE"
},
{
"firstName":"santosh",
"lastName":"jadi",
"gender":"male",
"dob":"2018-03-31T18:30:00.000Z",
"qualification":"BE"
}
]
7条答案
按热度按时间qyyhg6bp1#
通过你的问题,你想添加新的
Student
到resultList
。首先,你需要知道FormArray
是AbstractControl的数组。你可以添加到数组中,只有AbstractControl的类型。为了简化任务,更喜欢使用FormBuilder
:在填充resultList
FormArray
之前可以看到,它Map到了FormGroup:FormBuilder-根据用户指定的配置创建AbstractControl。
它本质上是语法糖,缩短了new FormGroup()、new FormControl()和new FormArray()样板,这些样板可以构建成更大的表单。
另外,在htmlformControlName绑定到
<p>
元素中,它不是一个输入,你不能绑定到像div/p/span这样的非表单元素:所以,我认为你只是想在table中显示添加的学生。然后迭代studList并在table中显示它的值:
打补丁值
打数组补丁时要注意,因为FormArray的patchValue是按index打补丁的:
因此,下面的代码修补了index=0处的元素:
this.myform.controls['resultList'] as FormArray
的第一个索引值将替换为:你的例子不起作用,因为patchValue需要数组中的一些控件。在你的例子中,数组中没有控件。查看源代码。
StackBlitz Demo
1bqhqjot2#
First try with this steps and make sure are you on correct way
因为在您的场景中,您要将对象修补到formArray,所以您必须首先解析该对象,并检查一次是否在app.module.ts中导入了ReactiveFormsModule。
vecaoik13#
你必须这样做,代码取自angular.io,你需要做setcontrol,它将做或去虽然链接有代码相同,它使用地址数组
b5lpy0ml4#
我更喜欢使用
FormBuilder
来创建表单。我相信studlist将通过API调用作为可观察对象而不是静态数组获得。让我们假设,我们的数据如下。
一旦数据可用,我们可以如下修补值:
idv4meu85#
数组不包含
patchValue
方法。您必须分别迭代控件和patchValue
。c0vxltue6#
我在
formarray
中使用formgroup
作为:对于补丁值,我使用以下方法:
使用这种方法,我们也可以验证嵌套字段。
希望这个能帮上忙。
exdqitrt7#
首先根据检索到的数据结构创建表单,然后使用
patchValue
;在应用
patchValue
之前,表单需要包含所有表单控件。假设您数据具有包含字符串数组的属性
伪代码:
然后
这个例子没有什么意义,因为你可以直接在
for
循环中初始化数据,但是对于更复杂的形式,这将使你避免解析所有的键和数据类型来初始化值。