angular2 submit form by pressing enter without sub

问题:

Is it possible to submit a form that does not have submit button (by pressing enter) example :

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

回答1:

maybe you add keypress or keydown to the input fields and assign the event to function that will do the submit when enter is clicked

your template would look like this

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

And you function inside the your class would look like this

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

回答2:

You can also add (keyup.enter)="xxxx()"

回答3:

Edit:

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

In order to use this method, you need to have a submit button even if it's not displayed "Thanks for Toolkit's answer"

Old Answer:

Yes, exactly as you wrote it, except the event name is (submit) instead of (ngSubmit):

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

回答4:

I prefer (keydown.enter)="mySubmit()" because there won't be added a line break if the cursor was somewhere within a <textarea> but not at its end.

回答5:

This way is much simple...

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

</form>

回答6:

Always use keydown.enter instead of keyup.enter to avoid lagging.

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

and function inside component.ts

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

回答7:

adding an invisible submit button does the trick

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

回答8:

Just simply add (keyup.enter)="yourFunction()"

回答9:

add this inside your input tag

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

回答10:

Hopefully this can help somebody: for some reason I couldn't track because of lack of time, if you have a form like:

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

when you hit the Enter button, the clearForm function is called, even though the expected behaviour was to call the doSubmit function. Changing the Clear button to a <a> tag solved the issue for me. I would still like to know if that's expected or not. Seems confusing to me

回答11:

(keyup.enter)="methodname()"

this should work and already mentioned in many answers, however that should be present on form tag and not on button.

回答12:

If you want to include both - accept on enter and accept on click then 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>

回答13:

If you want to include both simpler than what I saw here, you can do it just by including your button inside form.

Example with a function sending a message:

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

You can choose between clicking on the button or pressing enter key.