Angular 2는 템플릿 기반 형식으로 입력할 수 없습니다.

Angular 2는 템플릿 기반 형식으로 입력할 수 없습니다.

템플릿 기반 Blueprint를 사용하는 양식이 있으므로 다음과 같습니다.

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

이제 어떻게 하면 ENTER가 양식을 제출하지 못하게 할 수 있습니까?양식 내부의 사용자 지정 ENTER 동작을 방해하며, 실수로 입력 입력을 누를 경우에도 이를 원하지 않습니다.

주변을 살펴보니 오래된 앵귤러 1 답변과 표준 자바스크립트 답변도 발견했지만 앵귤러 2에는 이런 것이 이미 내장되어 있을 것 같지만 찾을 수 없었습니다.

만약 그렇지 않다면, 이것을 달성하는 가장 좋은 방법은 무엇일까요?

다음과 같이 간단한 것을 사용할 수 있는 것으로 나타났습니다.

<form (keydown.enter)="$event.preventDefault()"></form>

ENTER에서 양식이 제출되지 않도록 합니다.

제가 늦었다는 것은 알지만, 이에 대한 적절한 해결책이 있다면,

< 를 사용하는 경우button> 그럼 정의하기만 하면 됩니다.

<button type="button">

정의하지 않거나 type="submit"로 정의하지 않으면 양식이 제출되기 때문입니다.

사용하는 경우에도 동일<input>정의하기도 합니다.

<input type="button"> 

이 정도면 될 겁니다

-- 편집된 As @Chrillewoodz 코멘트.

제출/클릭 시 특정 프로세스를 수행하고자 할 경우 클릭 이벤트를 버튼에 추가할 수 있으며 원하는 작업을 수행할 수 있습니다.

각도 파일의 양식 태그를 원할 경우 @ViewChild를 사용할 수 있습니다.

입력 키가 텍스트 영역에서 작동하도록 허용하되 양식을 제출하지 못하도록 하려면 다음과 같이 수정할 수 있습니다.

HTML 템플릿에서:

<form (keydown.enter)="handleEnterKeyPress($event)">...</form>

뒤에 있는 .ts 코드의 컴포넌트 클래스에서:

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== 'textarea') {
      return false;
    }
  }

각도: 8.2.11

<div class="div101">
  <div class="card col-md-10">
    <form [formGroup]="postForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onSubmit()">
      <br />
      <div class="form-group">
        <label class="col-md-3">Name</label>
        <input class="col-md-12 form-control" type="text" formControlName="Name" required>
      </div>

      <div class="form-group">
        <label class="col-md-4">Date of Birth</label>
        <input type="text" placeholder="Date of Birth" class=" col-md-12 form-control" formControlName="DateofBirth"
          required bsDatepicker>
      </div>

      <div class="form-group">
        <label class="col-md-3">Mobile No</label>
        <input class="col-md-12 form-control" type="text" formControlName="MobileNo" required>
      </div>


      <div class="form-group">
        <label for="SelectCountry" class="col-md-3">Country</label>
        <select class="col-md-12 form-control" formControlName="Country" (change)="onChangeCountry($event)">
          <option *ngFor="let country of country; let i = index" value="{{i}}">{{country.name}}</option>
        </select>
      </div>


      <div class="form-group">
        <button type="submit" (click)="Save()" [disabled]="!postForm.valid" class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>
</div>

용도:

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

그리고 태그와 이 태그에 있는 내용이 enter와 shift + enter를 제출하는 것을 방지합니다.

예를 들어,저에겐 효과가 있었습니다.

<div name = "example" (keydown.shift.enter)="$event.preventDefault()" (keydown.enter)="$event.preventDefault()" ...

그리고 이후에는 이 예제 div의 모든 것이 entry와 shift + entry를 제출하는 것을 막습니다.

키 조합에 대한 자세한 정보: https://alligator.io/angular/binding-keyup-keydown-events/ #키 조합

이것이 제게 도움이 되었습니다.

• 제출하는 역할을 해야 하는 버튼은 다음과 같습니다.type="button"
• 그 단추는 있어야 합니다.(click)="onSubmit()"<- 호출할 메서드
• 제거할 수 있습니다.(ngSubmit)="onSubmit()"부터<form [formGroup]="form" (ngSubmit)="onSubmit()">

제거할 때 부작용이 있는지 잘 모르겠습니다.(ngSubmit)형식상으로는BTW: 나는 그것을 관찰했습니다.

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

사용자 정의 검증자를 사용하지 않도록 설정했습니다.

Angular 6.x+ 특정 입력에 입력되지 않도록 하려면 다음 작업을 수행합니다.

<input type="text" (keydown)="$event.keyCode == 13 ? $event.preventDefault() : null">

동일한 문제가 있었으므로 다음과 같은 도움이 되었습니다.

<button type="submit" [disabled]="!myForm.valid">Save</button>

각10

$event.preventDefault()가 작동하지 않았습니다. $event.stopPropagation이 작동했습니다.

바꾸다

<button type="submit" (click)="submit()">Submit</button>

로.

<button type="button" (click)="submit()">Submit</button>

https://github.com/angular/angular/issues/12643

지시어를 사용할 수 있습니다.

@Directive({
  selector: '[appNoEnterSubmit]'
})
export class NoEnterSubmitDirective {
  
  @HostListener('keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    // Deactivates submit on "Enter" in form fields.
    // Allows "Enter" on buttons, links and text areas.
    if (event.key == 'Enter' && !event.ctrlKey && !event.altKey &&
      !(event.target instanceof HTMLButtonElement || event.target instanceof HTMLLinkElement || event.target instanceof HTMLTextAreaElement)) {
      event.preventDefault();
    }
  }
}

용도:

<form [formGroup]="form" appNoEnterSubmit>

언급URL : https://stackoverflow.com/questions/40653758/angular-2-prevent-enter-from-submitting-in-template-driven-form