我目前正在开发一个由 Django 支持的 Angular 应用程序。
应用程序的一部分是它需要显示成员列表。成员数组看起来有点像这样:
[
{
name: 'John Smith',
id: 3,
score_set: [...]
},
{
name: 'Jane Doe',
id: 7,
score_set: [...]
},
{
name: 'Bill Appleseed',
id: 3,
score_set: [...]
},
{
name: 'Bob Lee',
id: 3,
score_set: [...]
}
]
我成功了,但我还需要用户能够编辑这些成员的姓名。我尝试使用 Reactive Forms 来让它工作:
首先,我做了一个FormGroup
仅由一个组成 FormArray
.这FormArray
基本上包含了所有的成员对象:
this.form = this.fb.group({
roster: this.fb.array(this.members.map((elem) => [elem, Validators.required]))
});
接下来,我写出了组件的模板:
<form>
<div [formGroup]="form">
<div formArrayName="roster">
<div *ngFor="let control of form.controls.roster.controls">
<div class="form-group">
<input class="form-control" [formControl]="control" placeholder="Enter name">
</div>
</div>
</div>
</div>
</form>
但不是显示 name
每个成员的属性它只是试图显示整个对象,使 [Object object]
.有没有办法配置每个 FormControl
使用name
属性(property)作为值(value)?
我希望在 <input>
中只显示名称, 当用户编辑 <input>
它更新了 name
对象的属性,同时保留所有其他属性。
如有任何帮助,我们将不胜感激!
最佳答案
因为你想保留完整的对象,所以你必须创建 formGroups
,如下所示:
interface Member {
id: number;
name: string;
}
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
roster: this.formBuilder.array(this.members.map(member => this.createMemberGroup(member))),
});
}
createMemberGroup(member: Member): FormGroup {
return this.formBuilder.group({
...member,
name: [member.name, Validators.required],
});
}
HTML:
<form class="container pt-2" [formGroup]="formGroup">
<div formArrayName="roster">
<div
[formGroupName]="index"
*ngFor="let control of formGroup.get('roster').controls; index as index">
<div class="form-group">
<input
class="form-control"
formControlName="name"
placeholder="Enter name"
[class.is-invalid]="control.invalid">
<small class="text-danger" *ngIf="control.invalid">Required</small>
</div>
</div>
</div>
</form>
关于Angular 5 - 带对象的表单控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49604325/