angular2 제출 버튼을 누르지 않고 enter를 눌러 양식을 제출합니다.

angular2 제출 버튼을 누르지 않고 enter를 눌러 양식을 제출합니다.

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

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

다음을 추가할 수도 있습니다.(keyup.enter)="xxxx()"

입력 필드에 또는 를 추가하고 enter를 클릭했을 때 전송되는 기능에 이벤트를 할당할 수도 있습니다.

템플릿은 다음과 같습니다.

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

편집합니다.

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

입력 태그 안에 추가합니다.

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

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

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

컴포넌트 내부에서 작동합니다.ts.

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

(keyup.enter)="methodname()"

이 방법은 작동하며 이미 많은 답변에서 언급되었지만 버튼이 아닌 양식 태그에 표시되어야 합니다.

대부분의 답변은 다음과 같은 방법을 사용할 것을 제안합니다.

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

</form>

이 접근 방식으로는 양식 개체가 다음과 같이 표시되지 않습니다.submitted. 원하지 않을 수도 있지만 검증 오류를 표시하기 위해 @ngspot/ngx-errors(뻔뻔한 자가 프로모션)와 같은 기능을 사용하는 경우 이 문제를 수정해야 합니다.방법은 다음과 같습니다.

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
  <button #submitBtn>Submit</button>
</form>

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

보이지 않는 제출 버튼을 추가하면 문제가 해결됩니다.

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

다른 사람에게 도움이 되었으면 합니다. 시간이 부족해서 추적할 수 없었습니다. 다음과 같은 양식이 있다면 말이죠.

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

을 치면요Enter버튼을 클릭합니다.clearForm함수가 호출됩니다. 예상되는 동작이 다음을 호출하는 것이었음에도 불구하고doSubmit기능.를 변경합니다.Clear단추를 A에 끼웁니다.<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>

음, 여기 작은 경고가 하나 있습니다.양식 또는 입력 필드를 누르지 않는 한 양식을 제출하려면 위의 항목 중 어느 것도 작동하지 않습니다.

아무 곳이나 클릭하지 않고 Enter 키를 눌러 양식을 제출하려면 html로 전 세계에 선언해야 합니다.

<button (window:keypress)="onSomeAction($event)">

및 TS 파일에 있습니다.

onSomeAction(event){
if(event.keyCode===13){
  //submit form
}

}

그렇지 않으면요.

<button (window:keypress.enter)="onSomeAction($event)">

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

언급URL : https://stackoverflow.com/questions/37577919/angular2-submit-form-by-pressing-enter-without-submit-button 입니다.