es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La validación de formularios de Angular funciona de manera opuesta a cómo debería funcionar en realidad.

Archivo ts:

myForm: FormGroup = new FormGroup({
    Id: new FormControl("",[Validators.pattern('^.{1,50}$')])
});

addEntry(){
    this.finalmsg =[];
    let clase = '';
    let msg = '';
    let snackbar = new SnackbarComponent(this.snackbar);
    if(this.myForm.controls['Id'].invalid){
        msg = 'Ingrese entre 1 y 50';
        clase = 'redsnackbar';
        this.finalmsg.push(msg);
        snackbar.openSnackBar(this.finalmsg, "Cerrar", clase);
    }
    this.dialogRef.close("OK");
}

Este es el código que estoy utilizando para validar el campo de entrada. Funciona de manera opuesta a como debería. Si cambio de inválido a válido, entonces se muestra la barra de snackbar. Y cuando es inválido, no entra en el bucle y se cierra el diálogo. ¿Cuál puede ser el problema?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    El problema podría estar relacionado con la ubicación del código para comprobar la validez del control del formulario. Actualmente, el código para abrir el snackbar se encuentra dentro de la declaración “if” que verifica si la entrada es inválida. Esto significa que el snackbar solo se abrirá cuando la entrada sea inválida.

    Para solucionar este problema, puedes mover el código para abrir el snackbar fuera de la declaración “if” y reemplazarla por una comprobación de entrada válida.

    Aquí tienes una versión actualizada del código:

    myForm: FormGroup = new FormGroup({
        Id: new FormControl("",[Validators.pattern('^.{1,50}$')])
    });
    
    addEntry(){
        this.finalmsg = [];
        let class = '';
        let msg = '';
        let snackbar = new SnackbarComponent(this.snackbar);
    
        if(this.myForm.controls['Id'].valid){
            this.dialogRef.close("OK");
        } else {
            msg = 'Ingrese entre 1 y 50';
            class = 'redsnackbar';
            this.finalmsg.push(msg);
            snackbar.openSnackBar(this.finalmsg, "Cerrar", class);
        }
    }
    

    En este código actualizado, la declaración “if” verifica una entrada válida en lugar de una inválida. Si la entrada es válida, se cierra el diálogo. Si la entrada es inválida, se ejecuta el código para abrir el snackbar.

Comments are closed.