Angular 角度反应表单，输入提交空数据，但按钮提交工作

我有一种反应形式：

   <form class="filter-form" [formGroup]="filterForm"  (ngSubmit)="applyFilter()">
    <mat-form-field (click)="$event.stopPropagation()">
      <mat-select formControlName="type" placeholder="Filter Type">
        <mat-option *ngFor="let key of filterKeys" [value]="filterValue(key)">{{filterLabel(key)}}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field (click)="$event.stopPropagation()">
      <input matInput formControlName="keyword" placeholder="Keyword" type="text">
    </mat-form-field>

    <div class="filter-buttons">
      <button class="secondary-button" (click)="clearForm()" mat-button>Clear</button>
      <button type="submit" mat-button [disabled]="!filterForm.valid">Apply</button>
    </div>
   </form>

这里有一个快速的闪电战。用户界面有点脏，但反应是一样的。打开你的控制台。如果输入值并按enter键，则表单值为空。如果您输入值并按“应用”键，则表单中有值

---

以下是我最终解决问题的方法：

在表单中添加了一个键控事件：

(keydown)="enterSubmit($event)"

在我检查enter键的情况下，防止默认值并传递表单值：

  enterSubmit(event: any) {
    if (event.keyCode === 13) {
      event.preventDefault();
      this.applyFilter(this.filterForm);
    }
  }

我猜enter按钮在应用数据更改并捕获它之前提交表单，然后传递表单值以捕获值

---

不是100%确定为什么这样做或者为什么这样做。如果有人能澄清评论，那将是令人惊讶的。

您使用OnPush策略吗？你能在stackblitz中重现这种行为吗？有一种轻微的可能性是，您有一个检测问题，在该问题中，

keydown

事件没有处理该值，而

click

事件没有处理该值。作为启动程序，请尝试附加一个keydown/keydup事件或手动触发CD

用户按enter键

在何处？您正在收听键盘事件吗？在您的输入字段中看不到任何keyUp、keyDown或keyPress事件。@monogate，哈哈。相同。@monogate正在进行stackblitz。当用户按enter键时，它调用

applyFilter

函数，就像按submit按钮一样，它只是空的。我可以在表单中添加一个

keydown

事件来检查enter并调用

applyFilter

函数，但这似乎是多余的。@monogate在我的问题中添加了一个stackblitz。这不是一个漂亮的UI，但我看到的交互是相同的。

  enterSubmit(event: any) {
    if (event.keyCode === 13) {
      event.preventDefault();
      this.applyFilter(this.filterForm);
    }
  }