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

Program / 글쓴이

제출 버튼이없는 양식을 제출할 수 있습니까 (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()" />