angular2 отправить форму, нажав enter без кнопки отправки

можно ли отправить форму, которая не имеет кнопки отправки (нажав enter) пример : 

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form
11 61
forms angularjs submit

11 ответов:

может быть, вы добавить keypress или keydown к полям ввода и назначить событие функции, которая будет делать отправить при нажатии enter

ваш шаблон будет выглядеть так

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

и вы действуете внутри вашего класса будет выглядеть так

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

вы также можете добавить (keyup.enter)="xxxx()"

123

Edit:

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

чтобы использовать этот метод, вам нужно иметь кнопку отправки, даже если она не отображается "Спасибо за ответ инструментария"

Ответ:

да, именно так, как вы его написали, за исключением того, что имя события (submit) вместо (ngSubmit):

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

60

предпочитаю (keydown.enter)="mySubmit()" потому что там не будет разрыв строки, если курсор где-нибудь внутри <textarea> но не в его конце.

22

этот способ очень простой...

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

</form>
10

просто добавить (keyup.enter)="yourFunction()"

5

добавление невидимой кнопки отправки делает трюк

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

4

всегда используйте keydown.введите вместо keyup.введите, чтобы избежать отставания.

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

и функция внутри компонента.ТС

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

надеюсь, это может помочь кому-то: по какой-то причине я не мог отслеживать из-за нехватки времени, если у вас есть такая форма, как:

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

когда вы нажмете на clearForm функция вызывается, даже если ожидаемое поведение должно было вызвать . Изменение до <a> тег решил проблему для меня. Я все равно хотел бы знать, ожидается ли это или нет. Кажется запутанным для меня

1

Если вы хотите включить оба-accept on enter и accept on click, то do -

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

Если вы хотите включить и проще, чем то, что я видел здесь, вы можете сделать это, просто включив кнопку внутри формы.

пример с функцией отправки сообщения:

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

вы можете выбрать между нажатием на кнопку или нажатием клавиши Enter.

0