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
so you need to clear several form values within the onCruceroChange method.
onCruceroChange() {
this.reservaForm.get('lugares').reset();
...
...
...
}
or you can use: this.reservaForm.lugares = '';