Angular 2：如何防止表单在按下回车键时提交？

Question

我有一个表单，其中有一个字段作为自动完成。如果用户输入一个单词并按下回车键，则该字段的内容应添加到字段下面的列表中。

问题是：当用户按下回车键时，整个表单被提交。

我已经在处理按键的函数中使用了return false。但似乎在调用此函数之前表单就已经被提交了。

如何防止这种情况发生？

基本表单：

<div id="profileForm">
  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" *ngIf="!showSuccessMessage">

    <div class="row">

      <div class="form-group col-xs-12 col-sm-6">
        <label for="first_name">My Skills</label>
        <div class="autocomplete">
          <input formControlName="skill_string" [(ngModel)]="skillString" name="skill_string"
          type="text" class="form-control" id="skill_string" placeholder="Comma separated" (keyup.enter)="skillsHandleEnter(skillString)">
          <ul class="autocomplete-list" *ngIf="skillHints.length > 0">
            <li class="list-item" *ngFor="let skill of skillHints" (click)="addSkillFromAutocomplete(skill)">{{skill}}</li>
          </ul>
        </div>
        <div id="skill-cloud" class="tag-cloud">
          <span class="skill-tag tag label label-success" *ngFor="let skill of selectedSkills" (click)="removeSkill(skill)">{{skill}} x</span>
        </div>
      </div>

    </div>

    <div class="row">

      <hr>

      <div class="form-group submit-group">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
        </div>
      </div>

    </div>

  </form>
</div>

基本组件（我为了在这里张贴而剥离了很多逻辑）：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import { Subscription } from 'rxjs/Rx';
import 'rxjs/add/operator/debounceTime';
import * as _ from 'lodash';

import { MemberService } from '../shared/index';

@Component({
  moduleId: module.id,
  selector: 'signup',
  templateUrl: 'signup.component.html',
  styleUrls: ['signup.component.css']
})
export class SignupComponent implements OnInit {

  private profileForm:FormGroup;
  private validation_errors:Array<any>;
  private selectedSkills:Array<string>;
  private skillHints:Array<string>;
  private skillString:string;

  constructor(private route: ActivatedRoute,
    private formBuilder: FormBuilder,
    private memberService: MemberService,
    private router: Router ) {

      this.selectedSkills = [];
      this.skillHints = [];
      this.skillString = '';

      // Set up form
      this.profileForm = this.formBuilder.group({
        skill_string: ['']
      });

  }

  ngOnInit(): any {
    // Do something
  }



  updateSelectedSkills(skillString:string):void {
    if(skillString) ) {
      let cleanString = skillString.trim().replace(/[ ]{2,}/g, ' ');
      this.selectedSkills = _.compact(this.selectedSkills.concat(cleanString.split(',')));
      this.skillString = '';
      this.skillHints = [];
    }
  }

  skillsHandleEnter(skillString:string):void {
    console.log("ENTER");
    this.updateSelectedSkills(skillString);
    return false;
  }

  autocompleteSkills(term:string):void {
    this.memberService.autocompleteSkills(term).subscribe(
      res => {
        this.skillHints = [];
        for(let i = 0; i < res.data.length; i++) {
          this.skillHints.push(res.data[i].name);
        }
      }
    );
  }

  addSkillFromAutocomplete(skillString:string):void {
    this.selectedSkills.push(skillString);
    this.memberProfile.skill_string = '';
    this.skillHints = [];
    this.skillString = '';
  }


  onSubmit():void {
    this.memberService.saveProfile(this.memberProfile, this.selectedSkills).subscribe(
      res => {
        console.log(res);
      }
    );
  }

}

- Ole Spaarmann

---

你看到这个了吗？https://dev59.com/M2Ik5IYBdhLWcg3wI7EF - Matthias

@Matthias：是的，但是：“这个解决方案只适用于按钮，但如果您在输入类型文本字段中按“Enter”键-仍然会发送表单。”-我也已经尝试删除提交按钮。没有运气。 - Ole Spaarmann

Answer 1

尝试

<form (keydown.enter)="$event.target.tagName == 'TEXTAREA'" [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">

这也将允许在 Textarea 中输入 enter。

- Ankit Singh

---

只是一个提示。返回 false 也会调用 $event.preventDefault()。 - Günter Zöchbauer

我刚刚测试了一下，对我来说它是有效的。$event.target.tagName == 'TEXTAREA'始终是一个布尔值，要么是false，要么是true。 - Ankit Singh

啊，抱歉。你是对的，我假设这是一个任务。也许我需要新眼镜:D - Günter Zöchbauer

哈哈，没关系。我从你这里学到了足够多的东西，即使没有问你，我也可以原谅你 :) - Ankit Singh

我还会添加按钮，$event.target.tagName == 'TEXTAREA' || $event.target.tagName == 'BUTTON'。有可能你使用TAB键浏览表单时停留在按钮上，这样按Enter键将不起作用。 - Lukas Jelinek

Answer 2

所以答案其实很简单... 不是因为我监听的是输入框上的 Enter 按键而不是按钮，所以不需要使用 Event.preventDefault()。仅仅从 button 中移除 type="submit" 是不够的，因为所有按钮默认都是提交类型。唯一需要改变的是在按钮元素上添加 type="button" 并添加一个 (click) 监听器：

<button type="button" (click)="onSubmit()" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>

唯一的问题是：现在使用回车键提交表单从未起作用。如果只在自动完成输入框中聚焦时阻止回车提交表单，可能会更加优雅一些。

编辑：

只有当光标位于自动完成字段中时才阻止使用回车键提交表单可以通过使用Ankit Singh的解决方案并进行一些修改来实现。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" (keydown.enter)="$event.target.id != 'skill_string'" *ngIf="!showSuccessMessage">

（注意：条件必须返回false以防止触发默认操作）

当然，我们需要再次使用常规的提交按钮（不要附加点击事件，否则表单将提交两次）：

<button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>

如果您想使用 .autocomplete 类，还可以检查 event.target.classList。或者将检查逻辑移到一个函数中，其中您可以传递 $event。

- Ole Spaarmann

Answer 3

Angular 2 中的事件与普通的 DOM 事件类似。要捕获事件对象，请在模板中的事件回调函数中传递 $event 参数：

HTML：

<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>

使用JavaScript的Event.preventDefault()：

@Component(...)
class MyComponent {
  skillsHandleEnter(event, skillString) {
    event.preventDefault();
    // ... your logic
  }
}

- Yosvel Quintero

Answer 4

阻止表单在按下Enter键或点击一个按钮时自动提交

<textarea (keydown.enter)="provoked($event)"></textarea>

<button (keydown.enter)="provoked($event)" (click)="provoked($event)"></button>

provoked($event) {
   $event.preventDefault()
}

如果需要将数据传递给方法，则尝试

<textarea (keydown.enter)="provoked($event, data)"></textarea>

<button (keydown.enter)="provoked($event, data)" (click)="provoked($event, data)"></button>

provoked($event, data) {
   $event.preventDefault()

   // process the data here
}

- WasiF

---

在textarea中，您不需要使用 preventDefault()。即使它是一个<input>，也无法使用 preventDefault()。您不能这样使用 preventDefault()。表单将完全忽略它。 - Kevin Beal