I want to send data to back-end by selecting multiple values as object as mentioned in form 2

122 Views Asked by At

I want to achieve output as format 2 and i am getting only format 1. so please help me. How can i do that? Please help me .I am new to angular and stack-overflow. Please don't be harsh on me if i made any silly mistake. Thank you. Thank you. I want to achieve output as format 2 and i am getting only format 1. so please help me. How can i do that? Please help me .I am new to angular and stack-overflow. Please don't be harsh on me if i made any silly mistake. Thank you. Thank you.

format:1(present output)

"subjectList": [
{
"subject": [
{
"subjectId": 1,
"subject": "English"
}
]
}
]

format:2(desired output)   
{

"subjectList": [
{

"subjectId": 1,
"subject": "English"
},
{

"subjectId": 1,
"subject": "English"
}    
]
}

here is my ts file.

buildteacherForm() {             

this.teacherForm = this.fb.group({
teacherId: [this.teacher.teacherId],
name: [this.teacher.name, [Validators.required, 
Validators.minLength(2), Validators.maxLength(20)]],
qualification: [this.teacher.qualification, [Validators.required, 
Validators.minLength(2), Validators.maxLength(20)]],
address: [this.teacher.address, [Validators.required, 
Validators.minLength(2), Validators.maxLength(20)]],
phoneNo: [this.teacher.phoneNo, [Validators.required, 
Validators.minLength(10)]],
dob: [this.teacher.dob, [Validators.required]],
subjectList: this.fb.array([]),

});

this.addSubjects();
}

addSubjects() {
const subjects = this.teacherForm.controls.subjectList as FormArray;
subjects.push(this.fb.group({
subject: [this.teacherSubject.subject],

}));
}

HTML: here is my html part

<div class="col-md-4">
<div
*ngFor="let teacherSubject of 
teacherForm.get('subjectList').controls;index as i"            
formArrayName="subjectList">
<div [formGroupName]="i">
<kurumba-form-group>
<mat-form-field class="example-full-width">
<mat-label>Subject list</mat-label>
<mat-select
multiple
matInput
id="subject"
formControlName="subject"
required>
<mat-option disabled> Select subject</mat-option>
<mat-option
[value]="subject"
*ngFor="let subject of teacherSubjectList"
>{{ subject.subject }}</mat-option>
</mat-select>
<mat-hint align="start">Select subject</mat-hint>
</mat-form-field>
</kurumba-form-group>
</div>
</div>
</div>
0

There are 0 best solutions below