se que me han ayudado bastante en esta comunidad, y quiero agradecer de antemano, solo que ahorita si estoy bastante confundida con un tema
Es que vea, yo tengo un interfaz que estoy utilizando para almacenar en ella diferente información del usuario que va a dar al localStorage.
La interfaz va algo así:
export interface BookingModel {
id?: string,
type?: string,
serviceSelected?: any[],
affiliate?: Affiliate,
doctor?: DoctorModel,
appointmentDate?: Date,
address?: string,
address_id?: string,
service?: string,
latlng?: LatLng,
patient?: PatientModel,
days?: any,
schedules?: any,
availabity?:AffiliateAvailability,
verifyPhone?: boolean
}
Entonces, yo lo que hice es que cree un servicio para almacenar en el localStorage,
service.ts
saveData() {
localStorage.setItem('bookingItem', JSON.stringify(this.bookingModel));
}
loadData() {
var value = localStorage.getItem('bookingItem');
if (value) {
this.bookingModel = JSON.parse(value);
}
}
eraseData() {
localStorage.removeItem('bookingItem');
}
De esta forma se me hace fácil acceder al local y por lo tanto modificarlo en si. Yo solo accedo a la referencia cada que cambio la variable original. Pero ahorita lo que yo quiero es crear un estado que se llama verifyPhone?: boolean
¿Porqué lo quiero hacer? Porque quiero que cuando el usuario termine de llenar un requisitos que se le están pidiendo, modificar en BookingModel
, la variable verifyPhone
como true de lo contrario el usuario no puede pasar vaya por ejemplo a la siguiente ruta, porque verifyPhone sigue como false
Yo estuve intentandolo de varias maneras, primero pense que si hacia algo como:
Y despues de declarla yo queria inicializar la variable y luego almacenarla en el local, pero me lanzaba un error type Cannot assign to 'phoneVerified' because it is a read-only property.
Leyendo un poco, descubrí que cuando se usa el get prácticamente no es una variable si no una referencia a otra variable, en este caso es a this.bookingModel.patient.verified
Entonces no se puede setear a la referencia si no que se tiene que setear a la variable original. Porque this.phoneVerified solo es la referencia, entonces si cambias la variable original tambien se cambia la referencia
Así que descarte hacerlo asi, porque me confundí todo, asi que entonces intente hacerlo asi:
checkVerified(){
switch(this.bookingService.bookingModel.verifyPhone){
case this.verifiedPhone === true:
this.bookingService.bookingModel.verifyPhone === true;
this.bookingService.saveData();
break;
case this.verifiedPhone === false:
this.bookingService.bookingModel.verifyPhone === false;
this.bookingService.saveData();
break;
default:
break;
}
}
Un método que intenta modificar la variable, pero aun asi no me funciona cuando lo paso en el metodo que verifica si verifyPhone es true para pasar a la siguiente pantalla
//Metodo que valida si los campos han sido llenados y si no lanza alerta
onClickNext() {
// debugger
console.log('this.patientForm :>> ', this.patientForm);
var valid: boolean = false;
var errorMessage;
if (this.patientForm.valid) {
// this.isSubmitted = true;
this.saveFormData();
// this.onResetForm();
valid = this.checkValidDate(this.convertedDate!);
// console.log('valid');
if (!valid) {
errorMessage = "Fecha inválida!"
}
}
else{
// this.isSubmitted = true;
// this.patientForm.updateValueAndValidity();
this.validateAllFormFields();
console.log('No se ha terminado de completar el formulario');
}
if (valid) {
this.bookingService.saveData();
//this.isSubmitted = true;
//Valida si verifiedPhone es true verifiedPhone es una variable que se pasa en el html en un ngIf y asi mostrar un div cuando sendOTP se ha cumplido
if (this.verifiedPhone) {
//this.createAppointment();
this.checkVerified();
this.router.navigate(['../pagar'], { relativeTo: this._activedRoute });
}
else {
this.checkVerified();
this.sendOTP();
}
}
else {
this.openSnackBar(errorMessage);
this.campoNoValido(this.patientForm.controls['firstName'].value);
}
}
Sin mentirles, ni exagerarles desde ayer quiero llegar a la solución, y lo he intentando de distintas formas, solo que no doy, si me pudieran dar una idea de como pudiera hacerlo porfavor. Y cuando no entiendo muy bien algo, me cuesta darme a explicar y tambien preguntar
Pero en conclusión, quiero poder acceder a verifyPhone?: boolean
, inicializarla en un componente .ts como true/false según el caso y almacenar su inicialización en el local usando el servicio this.bookingService.saveData()
asi si yo recarga o algo asi, ese dato persiste y no va obligar al usuario a hacer más de una vez una accion que sea requerida
¿Alguien sabe como?