angular2 wyślij formularz, naciskając klawisz Enter bez przycisku przesyłania

Czy można przesłać formularz, który nie ma przycisku przesyłania (naciskając klawisz Enter) przykład:

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

być może dodasz keypresslub keydowndo pól wejściowych i przypiszesz zdarzenie do funkcji, która wykona przesłanie po kliknięciu Enter

Twój szablon wyglądałby tak

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

A ty funkcjonujesz w klasie, która wyglądałaby tak

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

Możesz także dodać (keyup.enter)="xxxx()"

Edytować:

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

Aby skorzystać z tej metody, musisz mieć przycisk przesyłania, nawet jeśli nie jest wyświetlany „Dziękujemy za odpowiedź Toolkit ”

Stara odpowiedź:

Tak, dokładnie tak, jak to napisałeś, z wyjątkiem tego, że nazwa wydarzenia to (submit)zamiast (ngSubmit):

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

Wolę, (keydown.enter)="mySubmit()"ponieważ nie zostanie dodany podział wiersza, jeśli kursor znajdował się gdzieś w środku, <textarea>ale nie na jego końcu.

Ten sposób jest o wiele prosty ...

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

</form>

Aby uniknąć opóźnień, zawsze używaj keydown.enter zamiast keyup.enter.

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

i działają wewnątrz component.ts

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

dodaj to wewnątrz swojego tagu wejściowego

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

(keyup.enter)="methodname()"

powinno to działać i zostało już wspomniane w wielu odpowiedziach, jednak powinno znajdować się na tagu formularza, a nie na przycisku.

dodanie niewidocznego przycisku przesyłania załatwia sprawę

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

Po prostu dodaj (keyup.enter)="yourFunction()"

Mam nadzieję, że może to komuś pomóc: z jakiegoś powodu nie mogłem śledzić z powodu braku czasu, jeśli masz formę taką jak:

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

po Enternaciśnięciu przycisku clearFormfunkcja jest wywoływana, mimo że oczekiwanym zachowaniem było wywołanie doSubmitfunkcji. Zmiana Clearprzycisku na <a>tag rozwiązała problem. Nadal chciałbym wiedzieć, czy jest to oczekiwane, czy nie. Wydaje mi się to zagmatwane

Jeśli chcesz uwzględnić oba prostsze niż to, co widziałem tutaj, możesz to zrobić, po prostu umieszczając przycisk w formularzu.

Przykład z funkcją wysyłającą wiadomość:

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

Możesz wybrać pomiędzy kliknięciem przycisku lub naciśnięciem klawisza Enter.

Jeśli chcesz uwzględnić oba - zaakceptuj po wejściu i zaakceptuj po kliknięciu, a następnie zrób -

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