I am currently developing an Angular application with Django as the backend.
One of the features of my application is to show a list of members. The structure of the members array is as follows:
[
{
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: [...]
}
]
I have successfully implemented this feature, but now I need users to be able to edit the names of these members. I attempted to use Reactive Forms for this purpose:
Initially, I created a FormGroup that includes a single FormArray. This FormArray holds all the member objects:
this.form = this.fb.group({
roster: this.fb.array(this.members.map((elem) => [elem, Validators.required]))
});
Next, I designed the template for the component:
<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>
However, instead of displaying just the name property of each member, it tries to display the entire object resulting in [Object object]. Is there a way to configure each FormControl to utilize the name property as its value?
I aim to only display the name in the <input> field and when the user edits it, the name property of the object should update while keeping all other properties intact.
Any assistance on this matter would be greatly appreciated!