我目前正在研究由Django支持的Angular应用程序.
该应用程序的一部分是它需要显示成员列表. members数组看起来有点像这样：
[
{
name: 'John Smith',id: 3,score_set: [...]
},{
name: 'Jane Doe',id: 7,{
name: 'Bill Appleseed',{
name: 'Bob Lee',score_set: [...]
}
]
我得到了它的工作,但我还需要用户能够编辑这些成员的名字.我尝试使用Reactive Forms来实现这个目的：
首先,我创建了一个仅由一个FormArray组成的FormGroup.此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属性作为值？
我希望它只有名称显示在< input>中,并且当用户编辑< input>时它更新了对象的name属性,同时保留了所有其他属性.
任何帮助,将不胜感激！
解决方法
由于您希望保留完整对象,因此您必须创建formGroups,如下所示：
interface Member {
id: number;
name: string;
}
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
roster: this.formBuilder.array(this.members.map(elem => this.createMemberGroup(elem)))
});
}
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]="i"
*ngFor="let control of formGroup.get('roster').controls; index as i">
<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>
