Pesquisa de site

javascript - Prevenindo o envio do formulário ao pressionar a tecla Enter no Angular

Existem tantas respostas para isso no Stack Overflow. Mas, infelizmente, nenhuma delas está funcionando para mim. Vou te contar o que eu tentei uma por uma.

  1. <form (keydown.enter)="$event.preventDefault()" ...>
  2. <button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>

    @Component(...) class MyComponent { skillsHandleEnter(evento, skillString) { evento.preventDefault(); /... sua lógica } }

Mas nenhuma das abordagens está funcionando. Estou usando ngx-tags-input que me permite aplicar algumas tags separadas pela tecla enter. Isso cria um problema. No momento em que pressiono a tecla Enter, meu formulário é enviado com apenas uma tag que consegui inserir. Acredite, eu tentei quase tudo para impedir isso e também não quero complicar demais as coisas. Por favor, ignore as convenções de nomenclatura. Eu as corrigirei mais tarde.

Aqui está meu blog.component.html antes de implementar qualquer solução.

<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="exampleInputEmail1">
      <h3>Title</h3>
    </label>
    <input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
    <br>
    <label for="editor">
      <h3>Editor</h3>
    </label>
    <quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
  </div>
  <ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
  <button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

Por favor, corrija-me.

Resposta #1

Eu segui estes dois passos simples:

1) Eu adicionei um atributo na minha tag form.

(keydown.enter)="$event.preventDefault()"

2) Adicionado ouvinte (click) no botão de envio

Então, todo o código HTML fica assim:

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
        <div class="form-group">
                    ...
        </div>
        <button class="btn btn-primary (click)="onSubmit()">Submit</button>
      </form>
    </div>
  </div>
</div>

O problema era que eu estava usando o listener de clique com a própria tag form junto com keydown.enter.

Resposta #2

o elemento de botão HTML possui três tipos válidos

  1. enviar : o botão envia os dados do formulário para o servidor. Este é o padrão 🔥🔥 se o atributo não for especificado, ou se o atributo for alterado dinamicamente para um valor vazio ou inválido.
  2. resetar: O botão redefine todos os controles para seus valores iniciais, como . botão: O botão não possui comportamento padrão e não faz nada quando pressionado. Ele pode ter scripts do lado do cliente associados aos eventos do elemento, que são acionados quando os eventos ocorrem.
  3. botão: o botão não tem comportamento padrão e não faz nada quando pressionado. Ele pode ter scripts do lado do cliente associados aos eventos do elemento, que são acionados quando os eventos ocorrem.

então, para resolver o problema, basta definir o tipo do botão como button assim

<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>

Artigos relacionados