form into ngfor and getting data in array - arrays

Question

Problem- Here I'm using a single HTML Form. but in many cases, I'll get multiple counts of rooms and multiple counts of adults according to rooms.so I'm using *ngFor for multiple times of forms according to roomwise adults.
So in case, I have 2 rooms, and in particular rooms, I have 2 adults. so this form will repeat 4 times according to adults.
I have to save the all data in an array. But in FormGroup I'm getting only one form data only even I fill all forms.
this form repeats according to roomdetails.adult
HTML File
<div *ngfor="let item of roomdetails; let i = index" [attr.data-index]="i">
<form [formgroup]="ravelerDetails">
<div class="row">
<mat-card>
<h2 class="titleHeader">ROOM {{i+1}}</h2>
<ng-container formgroupname="customer_detail" *ngfor="let items of item.adult;>
<mat-form-field appearance="outline" color="primary" class="col-md-2">
<mat-label>Salutation</mat-label>
<mat-select [formcontrol]="salutation">
<mat-option value="Mr">Mr.</mat-option>
<mat-option value="Mrs">Mrs.</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" color="primary" class="col-md-5">
<mat-label>First Name</mat-label>
<input matinput placeholder="First Name" [formcontrol]="first_name" maxlength="25">
<mat-error *ngif="first_name.hasError('required')">
<strong>First Name</strong>is required.
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" color="primary" class="col-md-5">
<mat-label>Last Name</mat-label>
<input matinput placeholder="Last Name" [formcontrol]="last_name" maxlength="25">
<mat-error *ngif="last_name.hasError('required')">
<strong>Last Name</strong>is required.
</mat-error>
</mat-form-field>
</ng-container>
</mat-card>
</div>
</form>
</div>
TS File
initDos() {
return this.fb.group({
salutation: this.salutation,
first_name: this.first_name,
last_name: this.last_name,
})
}
travellDetiles() {
this.ravelerDetails = this.fb.group({
customer_detail: this.fb.array([this.initDos()]),
checkin_date: this.hotelSearch.checkin_date,
checkout_date: this.hotelSearch.checkout_date,
no_adult: this.hotelSearch.no_adult,
no_children: this.hotelSearch.no_children,
no_room: this.hotelSearch.no_room,
});
}
get dosArray() {
return this.ravelerDetails.get('customer_detail') as FormArray;
}
dos() {
this.dosArray.push(this.initDos());
}
removeDos(index) {
this.dosArray.removeAt(index);
}
Output
{
"no_room": "1",
"checkin_date": "2022-11-5",
"checkout_date": "2022-11-6",
"no_adult": "2",
"customer_detail": [{
"room_number": "1",
"salutation": "Mr",
"first_name": "test",
"last_name": "test",
}, {
"room_number": "1",
"salutation": "Mr",
"first_name": "test2",
"last_name": "test2",
}],
}