navigationend - router events angular 6

Angular 2 evita que se ingrese en presentaciones en forma de plantilla

Question

Tengo formularios que usan el modelo basado en plantillas, por lo que algo como esto:

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

Ahora, ¿cómo puedo evitar que ENTER envíe el formulario? Interfiere con el comportamiento de ENTRAR personalizado dentro del formulario y también si accidentalmente presiona ingresar en una entrada, lo cual no es deseado.

He mirado alrededor y he encontrado algunas respuestas antiguas de Angular 1 y también algunas de JavaScript estándar, pero creo que Angular 2 debe tener algo así ya incorporado, pero no he podido encontrarlo.

Si no lo hacen, ¿cuál sería la mejor manera de lograr esto?

Answer 1

Para permitir que la tecla Intro funcione en áreas de texto pero evita que se envíe el formulario, puede modificarlo de la siguiente manera:

En plantilla HTML:

<form (keydown.enter)="handleEnterKeyPress($event)">...</form>

En la clase del componente en el código .ts detrás:

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== ''textarea'') {
      return false;
    }
  }

Answer 2

Resulta que puedes usar algo tan simple como:

<form (keydown.enter)="$event.preventDefault()"></form>

Para evitar que el formulario se presente en ENTER.

Answer 3

Sé que llego tarde, pero puede que tenga la solución adecuada para esto,

si está usando, solo defina

<button type="button">

más bien no definirlo o definirlo como type = "submit" porque si no lo defines, enviará tu formulario.

Lo mismo si está usando, entonces también defina

<input type="button"> 

y esto funcionará

- Editado como comentario de @Chrillewoodz .

Si desea realizar algún proceso específico al enviar / hacer clic Puede agregar un evento de clic al botón, y puede hacer lo que quiera.

Si quiere la etiqueta Form en los archivos ts angulares, puede usar @ViewChild .

Answer 4

Tenía el mismo problema, esto me ayudó:

<button type="submit" [disabled]="!myForm.valid">Save</button>