입력 키를 누르면 Angular 5 버튼 제출

입력 키를 누르면 Angular 5 버튼 제출

저는 모든 일반 모델을 사용하는 Angular 5 폼 애플리케이션을 가지고 있지만, 'Submit(제출)' 버튼을 물리적으로 클릭하지 않고 폼을 제출하기를 원합니다.

일반적으로 그것이 추가하는 것만큼 쉽다는 것을 압니다.type=submit내 단추 요소에 연결했지만 전혀 작동하지 않는 것 같습니다.

전화하고 싶지 않아요onclick그것을 작동시키기 위한 기능.누가 제가 놓친 것을 제안해 줄 수 있습니까?

<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <mat-card>
    <mat-card-title class="firstCard">Investor/Adviser search</mat-card-title>
    <mat-card-content>
      <p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p>
      <p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p>
        <mat-form-field>
          <input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invForname" placeholder="Forename" #forename>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invSurname" placeholder="Surname" #surname>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invPostcode" placeholder="Postcode" #postcode>
        </mat-form-field>
    </mat-card-content>
    <mat-card-footer>
      <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button>
    </mat-card-footer>
  </mat-card>
</form>

keyup.enter 또는 keydown.enter를 사용해 보십시오.

  <button type="submit" (keyup.enter)="search(...)">Search</button>

입력 값이 무엇인지 궁금해하는 사람이 있습니다.

<input (keydown.enter)="search($event.target.value)" />

다음과 같은 더미 폼을 사용할 수도 있습니다.

<mat-card-footer>
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search." >Search</button>
</form>
</mat-card-footer>

검색 기능은 다음과 같습니다.return false작업이 실행되지 않도록 합니다.
Enter 키를 누를 때 양식에 포커스가 있는지 확인합니다(양식에 입력된 내용이 있을 때).

도움이 된 다른 답변 외에도 주변 div에도 추가할 수 있습니다.제 경우에는 사용자 이름/암호 필드를 사용하여 로그온하기 위한 것입니다.

<div (keyup.enter)="login()" class="container-fluid">

사용해 보십시오.keyup.enter하지만 당신의 내부에서 그것을 사용하는 것을 잊지 마세요.input꼬리표를 달다

<input
  matInput
  placeholder="enter key word"
  [(ngModel)]="keyword"
  (keyup.enter)="addToKeywords()"
/>

또 다른 대안은 양식 태그에서 키다운 또는 키업을 실행하는 것입니다.

<form name="nameForm" [formGroup]="groupForm" (keydown.enter)="executeFunction()" >

음, 여기에 작은 경고가 있습니다.양식을 제출하려면 양식 또는 입력 필드에서 아무 곳이나 클릭하지 않으면 위의 항목이 작동하지 않습니다.

아무 곳도 클릭하지 않고 Enter 키를 누르는 것만으로 양식을 제출하려면 html로 전체적으로 선언해야 합니다.

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

및 TS 파일:

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

OR

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

제출 단추와 함께 usingSubmit을 사용하면 됩니다.

<form (ngSubmit)="onSave()" [formGroup]="userForm">
  <!-- ...form inputs -->
    <button class="btn btn-primary type="submit" [disabled]="!userForm.valid">
            Save
    </button>
</form>

type="submit"재산만으로는 충분하지 않습니다.

이 행사에서 중요한 것은 예전 방식으로 양식을 제출하는 것을 강조하는 것입니다.

내 말은, 그것은 양식 태그에 있어야 합니다.(submit)그리고 동일한 형태로 포함된 버튼과 이 버튼은 반드시 다음을 가지고 있어야 합니다.type="submit"소유물.

그onSubmit첫 번째 줄과 일곱 번째 줄의 함수는 다음을 캡처합니다.enter주요 사건과 정상mouse click당신을 위한 이벤트.

그러나 둘 다 사용할 경우 http 요청이 두 번 전송됩니다.이것이 버그인지는 모르겠지만, 양식 제출에 링크한 기능만 있으면 충분합니다.

우리 중 많은 사람들이 Angular로 개발할 때 이 규칙을 따르지 않습니다.기본 접근성 및 사용자 친화적 양식을 만들 수 있습니다.

<form [formGroup]="form" (submit)="onSubmit()">

    <mat-form-field>
        <mat-label>Title</mat-label>
        <input matInput formControlName="title">
    </mat-form-field>

    <button type="submit" mat-raised-button (click)="onSubmit()">
        SUBMIT
    </button>

</form>

언급URL : https://stackoverflow.com/questions/50129245/angular-5-button-submit-on-enter-key-press