event.stopPropagation() 不适用于表单答案

【问题标题】：event.stopPropagation() not working on formsevent.stopPropagation() 不适用于表单
【发布时间】：2019-12-20 14:39:10
【问题描述】：

我有一个简单的角形，例如：

  <form [formGroup]="form">
    <div>
      <input type="text" (keydown.enter)="onEnterPerssed($event)" [formControl]="myList" formControlName="myList">
    </div>
   <br>

    <p *ngIf="sendData" class="mt-1">Data send successfully</p>

    <button type="submit" (click)="onSubmit(form)" class="btn btn-block btn-primary mt-2" style="width: 100px;" [disabled]="form.invalid">
    Submit
    </button>
  </form>

export class AppComponent implements OnInit {
  sendData: boolean = false;

  form: FormGroup;
  isDisabled: boolean = true;
  myList: FormControl = new FormControl('sdfsdf', [Validators.required  ]);

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      myList: this.myList
    });
  }

  onSubmit(form): void {
    this.sendData = true;
    console.log('data send successfully');
  }

  onEnterPerssed(event: Event) {
    event.stopPropagation();
    console.log('asdasfasfsfafasfasf');
  }
}

是否有任何解决方案可以防止在我们在输入字段上单击 Enter 时提交表单，而不更改按钮类型（提交 => 按钮）

【问题讨论】：

这能回答你的问题吗？ Prevent users from submitting a form by hitting Enter
在您提供的代码示例中，整个文档中禁用了 Enter 键。我试图理解为什么 event.stopPropagation() 在输入字段中不起作用。
the Enter key disabled in the whole document 是什么意思？例如，您实际上可以使用回车键来填充文本区域。

标签： javascript angular angular-forms

【解决方案1】：

更改form标签上的提交事件，并从提交按钮中删除点击事件。

<form [formGroup]="form" (ngSubmit)="onSubmit($event)">

onSubmit(event) {
    event.preventDefault();
    // logic goes here
}

ngSubmit 确保当处理程序代码抛出（这是提交的默认行为）并导致实际的 http post 请求时表单不提交。

【讨论】：

别再看了！

【解决方案2】：

在模板中试试这个：

在form 标签内使用(keydown.enter)="$event.preventDefault()

<form [formGroup]="form" (keydown.enter)="$event.preventDefault()">
    <div>
      <input type="text" (keydown.enter)="onEnterPerssed($event)" [formControl]="myList" formControlName="myList">
    </div>
   <br>

    <p *ngIf="sendData" class="mt-1">Data send successfully</p>

    <button type="submit" (click)="onSubmit(form)" class="btn btn-block btn-primary mt-2" style="width: 100px;" [disabled]="form.invalid">
    Submit
    </button>
  </form>

【讨论】：