1

Quiero realizar una validación de cuando hayan datos en el formulario y me vaya a salir de esa vista sin haber guardado los datos arroje una alerta de que hay datos sin guardar, un ejemplo de esto seria lo siguiente:

introducir la descripción de la imagen aquí

Al recargar la pagina o intentar ir a otro menú de la aplicación genera este aviso

introducir la descripción de la imagen aquí

Quiero lograr esto mismo que sugerencias me podrían dar para lograr esto. gracias

3 respuestas 3

0

Puedes probar con la funcion window.onbeforeunload

<script>
     window.onbeforeunload = function() {
        alert("esta apunto de salir")
    }
</script>

Puedes leer mas sobre su uso aqui

0

Para lograr esto con angular solo requieres lo siguiente:

export class AppComponent {
  @HostListener('window:unload', [ '$event' ])
  unloadHandler(event) {
    // ...
  }

  @HostListener('window:beforeunload', [ '$event' ])
  beforeUnloadHandler(event) {
    // ...
  }
}

Suponiendo que utilices reactives forms puedes utilizar this.tuFormulario.touched || this.tuFormulario.dirty. Aunque yo solo usaria dirty

Puedes ver esta respuesta en ingles aqui.

0

podrías preguntar si posee datos y posteriormente preguntar si quiere salir o no:

import {
  FormControl
} from '@angular/forms';


export class Test {

  dataInput = new FormControl('');

  closing() {
    if (this.isInputWithData) {
      //Aqui puedes insertar la salida, ya que confirma que quiere descartar
      //window.close() por ejemplo para cerrar la ventana
    }
  }

  isInputWithData(): boolean {
    if (this.dataInput.value != '' || this.dataInput.dirty) { //cualquiera de las 2 te sirve
      return confirm(' Discard changes?'); // si hubiese datos te pregunta
      //Esto traerá true o false dependiendo de tu elección
    } else {
      return false;
    }
  }

}
<form>
  <input type="text" [formControl]="dataInput">
</form>

Espero que te sirva !

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.