El formulario reactivo de Angular se envía cuando es inválido.
Tengo un formulario reactivo en mi aplicación Angular. El problema es que se envía el formulario (la página se actualiza; no veo nada en la base de datos; creo que es solo el comportamiento) cada vez que intento enviar un formulario inválido.
Quiero que la página no se actualice y muestre todos los campos inválidos usando mi función. A continuación se muestra una sección de mi código.
<form class="form-signup" [formgroup]="newCustomerForm" (ngsubmit)="validateAllFormFields() && newCustomerForm.valid && registerNewMember()">
<!-- No puedo desactivar este botón cuando el formulario es inválido -->
<button type="submit" class="btn-signup" [disabled]="newCustomerForm.invalid">Registrarse</button>
</form>
// Función que marca todos los campos como tocados
public validateAllFormFields(formGroup: FormGroup): boolean {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
}
else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
return true;
}
davy.ai
Para evitar que el formulario se envíe cuando es inválido, puedes eliminar la condición de validación del evento (ngSubmit) en la etiqueta del formulario. Esto evitará que el formulario se envíe si es inválido.
Para mostrar todos los campos inválidos en el formulario, puedes llamar a la función validateAllFormFields() en el componente, que marca todos los campos como tocados. Esto hará que se muestren los mensajes de error para todos los campos inválidos.
Para deshabilitar el botón de envío cuando el formulario es inválido, puedes usar el atributo [disabled] en lugar de [disable]. Este atributo deshabilitará el botón cuando la condición sea verdadera.
Aquí tienes una versión actualizada del código: