angular2 envie o formulário pressionando enter sem o botão enviar


100

É possível enviar um formulário que não possui botão de envio (pressionando enter) exemplo:

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

Respostas:


77

talvez você adicione keypressou keydownaos campos de entrada e atribua o evento à função que fará o envio quando o botão Enter for clicado

seu modelo ficaria assim

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

E você funciona dentro da sua classe ficaria assim

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

206

Você também pode adicionar (keyup.enter)="xxxx()"


Isso funciona muito bem se você tiver apenas uma função simples e antiga que gostaria de chamar em vez de um manipulador de envio
Scott R. Frost,

3
Esta abordagem foi mencionada em documentos Angular. angular.io/docs/ts/latest/guide/…
trungk18

É a única maneira que funciona na minha situação, obrigado!
switch87 de

5
Esta deve ser a resposta aceita. Elegância apenas da maneira que o Angular pode alcançar. Brilhante.
Scott Byers


84

Editar:

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

Para usar este método, você precisa ter um botão de envio, mesmo que não seja exibido "Obrigado pela resposta do Toolkit "

Resposta antiga:

Sim, exatamente como você escreveu, exceto que o nome do evento é em (submit)vez de (ngSubmit):

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


2
você pode fornecer um êmbolo? porque não funciona
Toolkit

Use "visibilidade: oculto;" em vez de. O "display: none;" trabalhou em cromo, mas não em safari.
Moulde

Isso deve ser usado, exceto que o botão de envio não deve estar oculto, mas visível, porque algumas pessoas irão procurar por esse botão e não se preocuparão em pressionar Enter.
Impulse The Fox

31

Prefiro (keydown.enter)="mySubmit()"porque não será adicionada uma quebra de linha se o cursor estiver em algum lugar dentro de a, <textarea>mas não no final.


1
Esta deve ser a solução aceita - muito mais limpa
rhysclay

27

Assim é muito simples ...

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

</form>

2
Obrigado, é mais fácil quando eu esperava. Resolvido assim: <input type = "text" class = "form-control" [(ngModel)] = "object.LanguageTableData" (blur) = "mymethod ()" (keyup.enter) = "mymethod ()" / >
Loutocký

1
muito mais fácil dessa forma, em vez de enviar uma função com $ event. Obrigado!
Helen

1
muito melhor. sem botões ocultos ou js.
Maneira

10

Sempre use keydown.enter em vez de keyup.enter para evitar atrasos.

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

e funcionam dentro de component.ts

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

10

adicione isso dentro de sua tag de entrada

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

obrigado irmão. Prefiro essa opção à resposta selecionada.
Santosh

8
(keyup.enter)="methodname()"

isso deve funcionar e já mencionado em várias respostas, porém deve estar presente na tag do formulário e não no botão.


7

adicionar um botão de envio invisível resolve

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


Use "visibilidade: oculto;" em vez de. O acima funcionou em cromo, mas não em safari.
Moulde


4

Espero que isso possa ajudar alguém: por algum motivo não consegui rastrear por falta de tempo, se você tiver um formulário como:

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

ao apertar o Enterbotão, a clearFormfunção é chamada, embora o comportamento esperado fosse chamar a doSubmitfunção. Alterar o Clearbotão para uma <a>tag resolveu o problema para mim. Eu ainda gostaria de saber se isso é esperado ou não. Parece confuso para mim


8
para evitar isso, você deve especificar type = "button" para o botão Limpar
radio_head

2

Se você quiser incluir os dois de forma mais simples do que o que vi aqui, você pode fazer isso apenas incluindo o botão dentro do formulário.

Exemplo com uma função enviando uma mensagem:

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

Você pode escolher entre clicar no botão ou pressionar a tecla Enter.


1

Se você deseja incluir ambos - aceitar ao entrar e aceitar ao clicar e fazer -

 <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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.