angular2 제출 버튼없이 Enter를 눌러 양식 제출

제출 버튼이없는 양식을 제출할 수 있습니까 (Enter 키를 눌러) 예 :

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

keypress또는 keydown입력 필드에 추가 하고 입력을 클릭하면 제출을 수행 할 기능에 이벤트를 할당 할 수 있습니다.

귀하의 템플릿은 다음과 같습니다

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

그리고 클래스 내부의 기능은 다음과 같습니다.

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

당신은 또한 추가 할 수 있습니다 (keyup.enter)="xxxx()"

편집하다:

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

이 방법을 사용하려면 "Thanks for Toolkit 's answer "가 표시되지 않더라도 제출 버튼이 있어야합니다.

이전 답변 :

예. 이벤트 이름이 다음을 (submit)대신 한다는 점을 제외하면 작성한대로 정확하게 입력합니다 (ngSubmit).

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

(keydown.enter)="mySubmit()"커서가 안에 <textarea>있지만 끝이 아닌 경우 줄 바꿈이 추가되지 않기 때문에 선호합니다 .

이 방법은 훨씬 간단합니다 ...

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

</form>

지연을 방지하려면 항상 keyup.enter 대신 keydown.enter를 사용하십시오.

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

component.ts 내부의 기능

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

이것을 입력 태그 안에 추가하십시오.

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

보이지 않는 제출 버튼을 추가하면 트릭이됩니다.

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

간단히 추가 (keyup.enter)="yourFunction()"

(keyup.enter)="methodname()"

이것은 작동하고 이미 많은 답변에서 언급되었지만 버튼이 아닌 양식 태그에 있어야합니다.

바라건대 이것은 누군가를 도울 수 있습니다.

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

당신이 명중 할 때 Enter버튼을의 clearForm기능은 예상되는 동작이 호출에도 불구하고, 호출 doSubmit기능. Clear버튼을 <a>태그로 변경하면 문제가 해결되었습니다. 나는 그것이 예상되는 것인지 아닌지 여전히 알고 싶습니다. 혼란스러워

여기에서 본 것보다 더 간단하게 두 가지를 모두 포함 하려면 양식 내부에 버튼을 포함하기 만하면됩니다.

메시지를 보내는 함수의 예 :

                <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 키 누르기 중에서 선택할 수 있습니다.

두 가지를 모두 포함하려면-입력시 수락하고 클릭시 수락 후 수행-

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