formulario de envío angular2 presionando enter sin botón de envío

100

¿Es posible enviar un formulario que no tiene el botón enviar (presionando enter) ejemplo:

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form
Florencia
fuente

Respuestas:

77

tal vez agregue keypresso keydowna los campos de entrada y asigne el evento a la función que hará el envío cuando se haga clic en ingresar

tu plantilla se vería así

<form (keydown)="keyDownFunction($event)">
  <input type="text" />
</form

Y tu función dentro de tu clase se vería así

keyDownFunction(event) {
  if (event.keyCode === 13) {
    alert('you just pressed the enter key');
    // rest of your code
  }
}
Khaled Al-Ansari
fuente
206

También puede agregar (keyup.enter)="xxxx()"

chisporrotear
fuente
Esto funciona muy bien si solo tiene una función antigua simple a la que le gustaría llamar en lugar de un controlador de envío
Scott R. Frost
3
Este enfoque se mencionó en los documentos de Angular. angular.io/docs/ts/latest/guide/…
trungk18
Esta es la única forma en que funciona en mi situación, ¡gracias!
switch87
5
Esta debería ser la respuesta aceptada. Elegancia solo en la forma en que Angular puede lograr. Brillante.
Scott Byers
Nueva mención en la documentación de Angular: angular.io/guide/user-input#key-event-filtering-with-keyenter
Rafael Neto
84

Editar:

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

Para utilizar este método, debe tener un botón de envío incluso si no se muestra "Gracias por la respuesta del kit de herramientas ".

Respuesta anterior:

Sí, exactamente como lo escribió, excepto que el nombre del evento es en (submit)lugar de (ngSubmit):

<form [ngFormModel]="xxx" (submit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>

Abdulrahman Alsoghayer
fuente
2
¿Puede proporcionar un plunker? porque no funciona
Kit de herramientas
Utilice "visibilidad: oculta"; en lugar. El "display: none;" trabajado en cromo, pero no en safari.
Moulde
Esto debe usarse, excepto que el botón de envío no debe estar oculto sino visible porque algunas personas buscarán ese botón y no se molestarán en presionar enter.
Impulse The Fox
31

Prefiero (keydown.enter)="mySubmit()"porque no se agregará un salto de línea si el cursor está en algún lugar dentro de un <textarea>pero no al final.

Martin Schneider
fuente
1
Esta debería ser la solución aceptada - mucho más limpia
rhysclay
27

De esta manera es mucho más simple ...

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">

</form>
Clayton KN Passos
fuente
2
Gracias, es más fácil cuando esperaba. Resuelto así: <input type = "text" class = "form-control" [(ngModel)] = "object.LanguageTableData" (blur) = "mymethod ()" (keyup.enter) = "mymethod ()" / >
Loutocký
1
mucho más fácil de esta manera en lugar de enviar una función con $ event. ¡Gracias!
Helen
1
mucho mejor. sin botones ocultos o js. Camino angular puro
RenanSS
10

Utilice siempre keydown.enter en lugar de keyup.enter para evitar retrasos.

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

y función dentro de component.ts

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }
Shamsul
fuente
10

agregue esto dentro de su etiqueta de entrada

<input type="text" (keyup.enter)="yourMethod()" />
Abdus Salam Azad
fuente
Gracias hermano. Prefiero esta opción a la respuesta seleccionada.
Santosh
8
(keyup.enter)="methodname()"

esto debería funcionar y ya se mencionó en muchas respuestas, sin embargo, debería estar presente en la etiqueta del formulario y no en el botón.

Santosh Kadam
fuente
7

agregar un botón de envío invisible hace el truco

<input type="submit" style="display: none;">

Kit de herramientas
fuente
Utilice "visibilidad: oculta"; en lugar. Lo anterior funcionó en cromo, pero no en safari.
Moulde
7

Simplemente agregue (keyup.enter)="yourFunction()"

Saurabh Agrawal
fuente
4

Espero que esto pueda ayudar a alguien: por alguna razón no pude rastrear debido a la falta de tiempo, si tiene un formulario como:

<form (ngSubmit)="doSubmit($event)">
  <button (click)="clearForm()">Clear</button>
  <button type="submit">Submit</button>
</form>

cuando presiona el Enterbotón, clearFormse llama a la función, aunque el comportamiento esperado era llamar a la doSubmitfunción. Cambiar el Clearbotón a una <a>etiqueta me solucionó el problema. Todavía me gustaría saber si eso se espera o no. Me parece confuso

Andrea Gherardi
fuente
8
Para evitar eso, debe especificar type = "button" para el botón Borrar
radio_head
2

Si desea incluir ambos más simples de lo que vi aquí, puede hacerlo simplemente incluyendo su botón dentro del formulario.

Ejemplo con una función que envía un mensaje:

                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>

Puede elegir entre hacer clic en el botón o presionar la tecla Intro.

Emerica
fuente
1

Si desea incluir ambos, acepte al ingresar y acepte al hacer clic y luego haga -

 <div class="form-group">
    <input class="form-control"   type="text" 
    name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
           (keyup.enter)="searchByText(filterdata)">
  <button type="submit"  
          (click)="searchByText(filterdata)" >

  </div>

fuente