forms - ngmodeloptions - angular2 enviar formulario presionando enter sin botón de enviar

enviar un formulario con un boton

Question

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

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

Answer 1

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

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

</form>

Answer 2

Espero que esto pueda ayudar a alguien: por alguna razón no pude rastrear por 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 botón Enter , se clearForm función clearForm , aunque el comportamiento esperado era llamar a la función doSubmit . Cambiar el botón Clear a una etiqueta <a> resolvió el problema. Todavía me gustaría saber si eso es esperado o no. Me parece confuso

Answer 3

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

Answer 4

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.

Answer 5

Si desea incluir ambos: acepte al ingresar y acepte al hacer clic, luego haga lo siguiente:

 <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>

Answer 6

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

Answer 7

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

Answer 8

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

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

y funciona dentro de component.ts

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

Answer 9

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

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

Answer 10

agregue esto dentro de su etiqueta de entrada

<input type="text" (keyup.enter)="yourMethod()" />

Answer 11

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

su plantilla se vería así

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

Y usted funciona dentro de su clase se vería así

keyDownFunction(event) {
  if(event.keyCode == 13) {
    alert(''you just clicked enter'');
    // rest of your code
  }
}

Answer 12

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 de Toolkit "

Vieja respuesta:

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

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