角2防止进入提交模板驱动的形式

我有一些使用模板驱动的蓝图的表单，比如:

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

现在，如何防止 ENTER 提交表单？它会干扰窗体内部的自定义 ENTER 行为，并且如果您意外地按 ENTER 键输入一个不需要的输入。

我四处看了看，找到了一些老的 Angular 1答案，还有一些标准的 JavaScript 答案，但我觉得 Angular 2一定已经内置了类似的东西，但我还没能找到它。

如果他们不这样做，那么实现这一目标的最佳方式是什么？

68991 次浏览
小开
最佳答案

Turns out that you can use something as simple as:

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

To prevent the form from submitting on ENTER.

小开

To allow enter key to work in textareas but prevent from submitting form, you could modify as follows:

In HTML template: 

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

In the component's class in the .ts code behind:

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

I know i am late, but may be i got proper solution for this,

if you are using <button> then just define

<button type="button">

rather not defining it or defining it as type="submit" because if you dont define it, it will submit your form.

Same if you are using <input> then also define 

<input type="button">

and this will work.

-- Edited As @Chrillewoodz comment.

If you wish to do some specific process on submit/click You can add click event to button, and in that you can do what ever you want.

If you want Form tag in angular ts files, then you can use @ViewChild.

小开

Had the same issue, this helped me:

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

Angular: 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>
小开

Use:

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

And it'll prevent tag and what is in this tag from submitting enter and shift + enter.

For example: It worked this for me:

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

And after this, everything under this example div are prevented from submitting enter and shift + enter.

More info about key combinations: https://alligator.io/angular/binding-keyup-keydown-events/#key-combinations

小开

This is what helped me:

  • the button that has to act as submitting one should be type="button"
  • that button should have (click)="onSubmit()" <- the method that will be called
  • and you can remove i.e. (ngSubmit)="onSubmit()" from <form [formGroup]="form" (ngSubmit)="onSubmit()">

I am not sure if there are side-effects of removing (ngSubmit) from the form. BTW: I observed that

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

have disabled custom validators.

小开

Angular 6.x+ To prevent enter in any specific input do this:

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

Angular 10

$event.preventDefault() did not work for me - $event.stopPropagation did.

小开

Change

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

to

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

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


提交答案