Put blank values ​in a form when I change the name of an input

When I change the value of the name of the cruise, the value of places or ports is not changed and that can give me several problems, which is why I want the values to be reset and blank when I change the name of the cruise, for example If I choose the Adventure cruise and the Alaska location, the ports of the Alaska location appear with the Adventure cruise, but if I change the cruise, all the ports appear instead of the Alaska ports appearing on that cruise, this is my code:

reservar.page.html:

`<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Reservar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form [formGroup]="reservaForm" (ngSubmit)="onSubmit()">
<ion-item class="titulo" color="primary">
<ion-title>Nuestra Flota</ion-title>
</ion-item>
<ion-item>
<ion-select label="Crucero:" placeholder="Escoge un crucero" name="nombreCrucero" formControlName="nombreCrucero" [compareWith]="compareFn" (ionChange)="onCruceroChange()">
<ion-select-option *ngFor="let crucero of cruceros" [value]="crucero" type="text">{{ crucero.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Lugares para visitar</ion-title>
</ion-item>
<ion-item>
<ion-select label="Lugares para visitar:" placeholder="Que lugares quieres visitar" name="lugares" formControlName="lugares" [compareWith]="compareFn" (ionChange)="onLugarChange()">
<ion-select-option *ngFor="let lugar of lugares" [value]="lugar" type="text">{{ lugar.name }} </ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Escoge el puerto de salida</ion-title>
</ion-item>
<ion-item>
<ion-select label="Puerto de Salida:" placeholder="Escoge el puerto de salida" name="puertoSalida" formControlName="puertoSalida" [compareWith]="compareFn">
<ion-select-option *ngFor="let puerto of puertos" [value]="puerto" type="text">{{ puerto.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Cantidad de noches</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de noches:" placeholder="Escoge el número de noches" name="noches" formControlName="noches" type="number"></ion-input>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Cantidad de huéspedes</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de huéspedes:" placeholder="Escoge el número de huéspedes" name="huespedes" formControlName="huespedes" type="number" (ionInput)="calcularCamarotes()"></ion-input>
</ion-item>
<div style="text-align: center">Cada 4 huéspedes se te añade otro camarote</div>
<ion-item class="titulo" color="primary">
<ion-title>Camarotes</ion-title>
</ion-item>
<ion-item>
<ion-select label="Camarote:" placeholder="Escoge un camarote" name="nombreCamarote" formControlName="nombreCamarote" [compareWith]="compareFn">
<ion-select-option *ngFor="let camarote of camarotes" [value]="camarote" type="text">{{ camarote.name }}</ion-select-option>
</ion-select>
</ion-item>
<div style="text-align: center">Puedes ver todos los camarotes en la sección "Camarotes" dentro de cada crucero</div>
<ion-item class="titulo" color="primary">
<ion-title>Número de Camarotes</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de camarotes:" placeholder="Escoge el número de camarotes" name="numeroCamarotes" formControlName="numeroCamarotes" [value]="reservaForm.value.numeroCamarotes" readonly></ion-input>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Fecha de Inicio del Crucero</ion-title>
</ion-item>
<ion-datetime [min]="today" class="fecha" presentation="date" name="fechaInicio" formControlName="fechaInicio"></ion-datetime>
<div class="boton">
<ion-button type="submit" (click)="alertaReserva()" [disabled]="reservaForm.invalid">Reservar</ion-button>
</div>
</form>
</ion-content> `


reservar.page.ts

`import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterLink } from '@angular/router';
import { MenuController } from '@ionic/angular';
import { ReservasService } from '../reservas.service';
import { AlertController } from '@ionic/angular';

@Component({
selector: 'app-reservar',
templateUrl: './reservar.page.html',
styleUrls: ['./reservar.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, RouterLink, IonicModule, ReactiveFormsModule ]
})
export class ReservarPage implements OnInit {

today: any;

ngOnInit(){
this.getDate();

}

getDate() { const date = new Date(); this.today = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2); console.log(this.today); }

cruceros=[

]

lugares = [

]

puertos = [

]

camarotes = [

]

lugaresAdventure = [

]

puertosAdventure = [

]

lugaresAllure = [

]

puertosAllure = [

]

lugaresAnthem = [

]

puertosAnthem = [

]

lugaresBrilliance = [

]

puertosBrilliance = [

]

lugaresEnchantment = [

]

puertosEnchantment = [

]

lugaresExplorer = [

]

puertosExplorer = [

]

lugaresFreedom = [

]

puertosFreedom = [

]

lugaresGrandeur = [

]

puertosGrandeur = [

]

lugaresHarmony = [

]

puertosHarmony = [
{ id: 10, name: 'Galveston, Texas' }
]

lugaresIcon = [
{ id: 6, name: 'El Caribe' }
]

puertosIcon = [
{ id: 12, name: 'Miami, Florida' }
]

lugaresIndependence = [
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' },
{ id: 7, name: 'Europa' },
{ id: 14, name: 'Transatlántico' }
]

puertosIndependence = [
{ id: 5, name: 'Southampton, Inglaterra' },
{ id: 12, name: 'Miami, Florida' }
]

lugaresJewel = [
{ id: 4, name: 'Canada y Nueva Inglaterra' },
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' }
]

puertosJewel = [
{ id: 7, name: 'Boston, Massachusetts' },
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 10, name: 'Galveston, Texas' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

lugaresLiberty = [
{ id: 4, name: 'Canada y Nueva Inglaterra' },
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' },
{ id: 10, name: 'Las Bermudas' }
]

puertosLiberty = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' },
{ id: 9, name: 'Fort Lauderdale, Florida' }
]

lugaresMariner = [
{ id: 6, name: 'El Caribe' }
]

puertosMariner = [
{ id: 10, name: 'Galveston, Texas' }
]

lugaresNavigator = [
{ id: 11, name: 'México' }
]

puertosNavigator = [
{ id: 11, name: 'Los Ángeles, California' }
]

lugaresOasis = [
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' },
{ id: 14, name: 'Transatlántico' }
]

puertosOasis = [
{ id: 2, name: 'Barcelona, España' },
{ id: 9, name: 'Fort Lauderdale, Florida' }
]

lugaresOdyssey = [
{ id: 6, name: 'El Caribe' },
{ id: 7, name: 'Europa' },
{ id: 9, name: 'Las Bahamas' },
{ id: 14, name: 'Transatlántico' }
]

puertosOdyssey = [
{ id: 3, name: 'Roma (Civitavecchia), Italia' },
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' }
]

lugaresOvation = [
{ id: 1, name: 'Alaska' },
{ id: 2, name: 'Asia' },
{ id: 3, name: 'Australia y Nueva Zelanda' },
{ id: 11, name: 'México' },
{ id: 13, name: 'Pacífico Sur' },
{ id: 15, name: 'Transpacífico'}
]

puertosOvation = [
{ id: 11, name: 'Los Ángeles, California' },
{ id: 22, name: 'Hong Kong, China' },
{ id: 23, name: 'Pekín (Beijing), China' },
{ id: 25, name: 'Singapur, Singapur' },
{ id: 31, name: 'Sídney, Australia' }
]

lugaresQuantum = [
{ id: 1, name: 'Alaska' },
{ id: 3, name: 'Australia y Nueva Zelanda' },
{ id: 8, name: 'Hawái' },
{ id: 11, name: 'México' },
{ id: 13, name: 'Pacífico Sur' },
{ id: 15, name: 'Transpacífico'}
]

puertosQuantum = [
{ id: 11, name: 'Los Ángeles, California' },
{ id: 14, name: 'Oahu (Honolulú), Hawái' },
{ id: 18, name: 'Seattle, Washington' },
{ id: 25, name: 'Singapur, Singapur' },
{ id: 30, name: 'Brisbane, Australia' },
{ id: 31, name: 'Sídney, Australia' }
]

lugaresRadiance = [
{ id: 1, name: 'Alaska' },
{ id: 5, name: 'Canal de Panamá' },
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' },
{ id: 12, name: 'Pacífico Noroeste' }
]

puertosRadiance = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 11, name: 'Los Ángeles, California' },
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' },
{ id: 17, name: 'San Diego, California' },
{ id: 19, name: 'Seward, Alaska' },
{ id: 20, name: 'Tampa, Florida' }
]

lugaresRhapsody = [
{ id: 6, name: 'El Caribe' }
]

puertosRhapsody = [
{ id: 20, name: 'Tampa, Florida' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

lugaresSerenade = [
{ id: 1, name: 'Alaska' },
{ id: 5, name: 'Canal de Panamá' },
{ id: 6, name: 'El Caribe' },
{ id: 12, name: 'Pacífico Noroeste' }
]

puertosSerenade = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 11, name: 'Los Ángeles, California' },
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' },
{ id: 17, name: 'San Diego, California' },
{ id: 20, name: 'Tampa, Florida' },
{ id: 27, name: 'Cartagena, Colombia' },
{ id: 28, name: 'Colón, Panamá' }
]

lugaresSpectrum = [
{ id: 2, name: 'Asia' }
]

puertosSpectrum = [
{ id: 22, name: 'Hong Kong, China' },
{ id: 24, name: 'Shanghái (Baoshán), China' }
]

lugaresStar = [
{ id: 6, name: 'El Caribe' }
]

puertosStar = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

lugaresSymphony = [
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' }
]

puertosSymphony = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' },
{ id: 12, name: 'Miami, Florida' }
]

lugaresUtopia = [
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' }
]

puertosUtopia = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

lugaresVision = [
{ id: 4, name: 'Canada y Nueva Inglaterra' },
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' },
{ id: 10, name: 'Las Bermudas' }
]

puertosVision = [
{ id: 6, name: 'Baltimore, Maryland' }
]

lugaresVoyager = [
{ id: 3, name: 'Australia y Nueva Zelanda' },
{ id: 6, name: 'El Caribe' },
{ id: 7, name: 'Europa' },
{ id: 9, name: 'Las Bahamas' },
{ id: 13, name: 'Pacífico Sur' },
{ id: 14, name: 'Transatlántico' }
]

puertosVoyager = [
{ id: 1, name: 'Atenas (El Pireo), Grecia'},
{ id: 2, name: 'Barcelona, España' },
{ id: 3, name: 'Roma (Civitavecchia), Italia' },
{ id: 4, name: 'Rávena (Venecia), Italia' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' },
{ id: 25, name: 'Singapur, Singapur' },
{ id: 30, name: 'Brisbane, Australia' }
]

lugaresWonder = [
{ id: 6, name: 'El Caribe' },
{ id: 9, name: 'Las Bahamas' }
]

puertosWonder = [
{ id: 12, name: 'Miami, Florida' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosAlaskaAnthem = [
{ id: 18, name: 'Seattle, Washington' }
]

puertosAlaskaOvation = [
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' },
{ id: 19, name: 'Seward, Alaska' }
]

puertosAlaskaQuantum = [
{ id: 18, name: 'Seattle, Washington' }
]

puertosAlaskaRadiance = [
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' },
{ id: 19, name: 'Seward, Alaska' }
]

puertosAlaskaSerenade = [
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' }
]

puertosAlaskaVoyager = [
{ id: 18, name: 'Seattle, Washington' }
]

puertosAsiaAnthem = [
{ id: 25, name: 'Singapur, Singapur' },
{ id: 26, name: 'Tokyo (Yokohama), Japón' }
]

puertosAsiaOvation = [
{ id: 22, name: 'Hong Kong, China' },
{ id: 23, name: 'Pekín (Beijing), China' },
{ id: 25, name: 'Singapur, Singapur' },
{ id: 26, name: 'Tokyo (Yokohama), Japón' }
]

puertosAsiaSpectrum = [
{ id: 22, name: 'Hong Kong, China' },
{ id: 24, name: 'Shanghái (Baoshán), China' }
]

puertosAustraliayNuevaZelandaAnthem = [
{ id: 31, name: 'Sídney, Australia' }
]

puertosAustraliayNuevaZelandaOvation = [
{ id: 31, name: 'Sídney, Australia' }
]

puertosAustraliayNuevaZelandaQuantum = [
{ id: 25, name: 'Singapur, Singapur' },
{ id: 30, name: 'Brisbane, Australia' }
]

puertosAustraliayNuevaZelandaVoyager = [
{ id: 25, name: 'Singapur, Singapur' },
{ id: 30, name: 'Brisbane, Australia' }
]

puertosCanadayNuevaInglaterraBrilliance = [
{ id: 7, name: 'Boston, Massachusetts' }
]

puertosCanadayNuevaInglaterraLiberty = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' }
]

puertosCanadayNuevaInglaterraVision = [
{ id: 6, name: 'Baltimore, Maryland' }
]

puertosCanalPanamaRadiance = [
{ id: 17, name: 'San Diego, California' },
{ id: 20, name: 'Tampa, Florida' }
]

puertosCanalPanamaSerenade = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 17, name: 'San Diego, California' }
]

puertosCaribeAdventure = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosCaribeAllure = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 10, name: 'Galveston, Texas' },
{ id: 12, name: 'Miami, Florida' }
]

puertosCaribeBrilliance = [
{ id: 13, name: 'Nueva Orleans, Luisiana' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

puertosCaribeEnchantment = [
{ id: 20, name: 'Tampa, Florida' }
]

puertosCaribeExplorer = [
{ id: 12, name: 'Miami, Florida' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosCaribeFreedom = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 12, name: 'Miami, Florida' }
]

puertosCaribeGrandeur = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 20, name: 'Tampa, Florida' }
]

puertosCaribeHarmony = [
{ id: 10, name: 'Galveston, Texas' }
]

puertosCaribeIcon = [
{ id: 12, name: 'Miami, Florida' }
]

puertosCaribeIndependence = [
{ id: 12, name: 'Miami, Florida' }
]

puertosCaribeJewel = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 10, name: 'Galveston, Texas' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

puertosCaribeLiberty = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' },
{ id: 9, name: 'Fort Lauderdale, Florida' }
]

puertosCaribeMariner = [
{ id: 10, name: 'Galveston, Texas' }
]

puertosCaribeOasis = [
{ id: 9, name: 'Fort Lauderdale, Florida' }
]

puertosCaribeOdyssey = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' }
]

puertosCaribeRadiance = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 20, name: 'Tampa, Florida' }
]

puertosCaribeRhapsody = [
{ id: 20, name: 'Tampa, Florida' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

puertosCaribeSerenade = [
{ id: 20, name: 'Tampa, Florida' },
{ id: 27, name: 'Cartagena, Colombia' },
{ id: 28, name: 'Colón, Panamá' }
]

puertosCaribeStar = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosCaribeSymphony = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' },
{ id: 12, name: 'Miami, Florida' }
]

puertosCaribeUtopia = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosCaribeVision = [
{ id: 6, name: 'Baltimore, Maryland' }
]

puertosCaribeVoyager = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosCaribeWonder = [
{ id: 12, name: 'Miami, Florida' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosEuropaAllure = [
{ id: 2, name: 'Barcelona, España' },
{ id: 3, name: 'Roma (Civitavecchia), Italia' }
]

puertosEuropaBrilliance = [
{ id: 1, name: 'Atenas (El Pireo), Grecia'},
{ id: 2, name: 'Barcelona, España' }
]

puertosEuropaExplorer = [
{ id: 2, name: 'Barcelona, España' },
{ id: 4, name: 'Rávena (Venecia), Italia' }
]

puertosEuropaIndependence = [
{ id: 5, name: 'Southampton, Inglaterra' }
]

puertosEuropaOdyssey = [
{ id: 3, name: 'Roma (Civitavecchia), Italia' }
]

puertosEuropaVoyager = [
{ id: 1, name: 'Atenas (El Pireo), Grecia'},
{ id: 2, name: 'Barcelona, España' },
{ id: 3, name: 'Roma (Civitavecchia), Italia' },
{ id: 4, name: 'Rávena (Venecia), Italia' }
]

puertosHawaiAnthem = [
{ id: 14, name: 'Oahu (Honolulú), Hawái' },
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' }
]

puertosHawaiQuantum = [
{ id: 14, name: 'Oahu (Honolulú), Hawái' }
]

puertosBahamasAdventure = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosBahamasAllure = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 10, name: 'Galveston, Texas' },
{ id: 12, name: 'Miami, Florida' }
]

puertosBahamasBrilliance = [
{ id: 13, name: 'Nueva Orleans, Luisiana' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

puertosBahamasEnchantment = [
{ id: 20, name: 'Tampa, Florida' }
]

puertosBahamasExplorer = [
{ id: 12, name: 'Miami, Florida' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosBahamasFreedom = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 12, name: 'Miami, Florida' }
]

puertosBahamasGrandeur = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 20, name: 'Tampa, Florida' }
]

puertosBahamasHarmony = [
{ id: 10, name: 'Galveston, Texas' }
]

puertosBahamasIcon = [
{ id: 12, name: 'Miami, Florida' }
]

puertosBahamasIndependence = [
{ id: 12, name: 'Miami, Florida' }
]

puertosBahamasJewel = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 10, name: 'Galveston, Texas' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

puertosBahamasLiberty = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' },
{ id: 9, name: 'Fort Lauderdale, Florida' }
]

puertosBahamasMariner = [
{ id: 10, name: 'Galveston, Texas' }
]

puertosBahamasOasis = [
{ id: 9, name: 'Fort Lauderdale, Florida' }
]

puertosBahamasOdyssey = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' }
]

puertosBahamasRadiance = [
{ id: 9, name: 'Fort Lauderdale, Florida' },
{ id: 20, name: 'Tampa, Florida' }
]

puertosBahamasRhapsody = [
{ id: 20, name: 'Tampa, Florida' },
{ id: 29, name: 'San Juan, Puerto Rico' }
]

puertosBahamasSerenade = [
{ id: 20, name: 'Tampa, Florida' },
{ id: 27, name: 'Cartagena, Colombia' },
{ id: 28, name: 'Colón, Panamá' }
]

puertosBahamasStar = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosBahamasSymphony = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' },
{ id: 12, name: 'Miami, Florida' }
]

puertosBahamasUtopia = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosBahamasVision = [
{ id: 6, name: 'Baltimore, Maryland' }
]

puertosBahamasVoyager = [
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosBahamasWonder = [
{ id: 12, name: 'Miami, Florida' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosBermudasLiberty = [
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' }
]

puertosBermudasVision = [
{ id: 6, name: 'Baltimore, Maryland' }
]

puertosMexicoNavigator = [
{ id: 11, name: 'Los Ángeles, California' }
]

puertosMexicoOvation = [
{ id: 11, name: 'Los Ángeles, California' }
]

puertosMexicoQuantum = [
{ id: 11, name: 'Los Ángeles, California' }
]

puertosPacificoNoroesteRadiance = [
{ id: 11, name: 'Los Ángeles, California' },
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' }
]

puertosPacificoNoroesteSerenade = [
{ id: 11, name: 'Los Ángeles, California' },
{ id: 16, name: 'Puerto de cruceros de Vancouver, (Columbia Británica)' }
]

puertosPacificoSurAnthem = [
{ id: 31, name: 'Sídney, Australia' }
]

puertosPacificoSurOvation = [
{ id: 31, name: 'Sídney, Australia' }
]

puertosPacificoSurQuantum = [
{ id: 30, name: 'Brisbane, Australia' },
{ id: 31, name: 'Sídney, Australia' }
]

puertosPacificoSurVoyager = [
{ id: 30, name: 'Brisbane, Australia' }
]

puertosTransatlanticoAdventure = [
{ id: 2, name: 'Barcelona, España' },
]

puertosTransatlanticoAllure = [
{ id: 2, name: 'Barcelona, España' },
{ id: 12, name: 'Miami, Florida' }
]

puertosTransatlanticoBrilliance = [
{ id: 12, name: 'Miami, Florida' }
]

puertosTransatlanticoExplorer = [
{ id: 2, name: 'Barcelona, España' },
{ id: 12, name: 'Miami, Florida' }
]

puertosTransatlanticoHarmony = [
{ id: 10, name: 'Galveston, Texas' }
]

puertosTransatlanticoIndependence = [
{ id: 5, name: 'Southampton, Inglaterra' },
{ id: 12, name: 'Miami, Florida' }
]

puertosTransatlanticoOdyssey = [
{ id: 3, name: 'Roma (Civitavecchia), Italia' },
{ id: 8, name: 'Cape Liberty (Nueva York), Nueva Jersey' }
]

puertosTransatlanticoVoyager = [
{ id: 2, name: 'Barcelona, España' },
{ id: 15, name: 'Orlando (Puerto Cañaveral), Florida' }
]

puertosTranspacificoAnthem = [
{ id: 14, name: 'Oahu (Honolulú), Hawái' },
{ id: 31, name: 'Sídney, Australia' }
]

puertosTranspacificoOvation = [
{ id: 11, name: 'Los Ángeles, California' },
{ id: 26, name: 'Tokyo (Yokohama), Japón' }
]

puertosTranspacificoQuantum = [
{ id: 31, name: 'Sídney, Australia' }
]

puertosTranspacificoVoyager = [
{ id: 30, name: 'Brisbane, Australia' },
]

onCruceroChange() {
const cruceroSeleccionado = this.reservaForm.value.nombreCrucero;
}
}

onLugarChange() {
const lugarSeleccionado = this.reservaForm.value.lugares;
const cruceroSeleccionado = this.reservaForm.value.nombreCrucero;
}

compareFn(o1, o2) {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
}

calcularCamarotes() {
const huespedes = this.reservaForm.value.huespedes || 0;
const numeroCamarotes = Math.ceil(Number(huespedes) / 4).toString();
this.reservaForm.patchValue({ numeroCamarotes });
}

reservaForm = new FormGroup({
fechaInicio: new FormControl("", Validators.required),
lugares: new FormControl(null, [Validators.required]),
puertoSalida: new FormControl("", [Validators.required]),
noches: new FormControl("", [Validators.required]),
huespedes: new FormControl("", [Validators.required]),
nombreCamarote: new FormControl("", [Validators.required]),
numeroCamarotes: new FormControl("1", [Validators.required]),
nombreCrucero: new FormControl(null, [Validators.required])
})

async onSubmit(){
const datos = this.reservaForm.value
await this.reservasService.guardarReserva(
this.reservaForm.value.fechaInicio,
this.reservaForm.value.lugares,
this.reservaForm.value.puertoSalida,
this.reservaForm.value.noches,
this.reservaForm.value.huespedes,
this.reservaForm.value.nombreCamarote,
this.reservaForm.value.numeroCamarotes,
this.reservaForm.value.nombreCrucero)
}

async alertaReserva() {
const alert = await this.alertController.create({
header: '¡Crucero Reservado Con Éxito!',
message: 'Si quieres ver o cancelar tus reservas, lo puedes hacer desde tu perfil',
buttons: ['Action'],
});

await alert.present();
}

constructor(public menu: MenuController, public reservasService: ReservasService, private alertController: AlertController) {
this.menuActive();
this.lugares = this.lugares;
this.puertos = this.puertos;
}

menuActive(){
this.menu.enable(true, 'menu');
}

}`


I have been searching in the internet on how to do that but i didnt finde anything im new in ionic and I dont know a lot of things

Continue reading...