Angular reactive form, enter submitting empty data but button submit works

Question

I have a reactive form:

   <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>

When the user presses enter the form submits but the input values are all null. However, if the user presses the submit button it works as expected.

...
    this.filterForm = this.fb.group({
      type: [null, Validators.required],
      keyword: [null, Validators.required]
    });
...
  applyFilter() {
    const formData = this.filterForm.getRawValue();
    console.log(this.filterForm);

    this.filterOptions.emit({ id: this.columnId, ...formData });

    this.filtered = true;
  }

Here's a quick stackblitz. It's a bit dirty in the UI but the reaction is the same. Open your console. If you input values and press enter, form values are null. If you input values and press "apply" the form has values.

https://angular-ivy-zhhdmx.stackblitz.io

Do you use OnPush strategy? Can you recreate this behavior in stackblitz? There is a slight chance that you have a detection problem in which the value is not processed for keydown event but does for click event. As a starter, try to attach a keydown/keyup event or to manually trigger the CD — monogate
user presses enter where? Are you listening to keyboard events? Not seeing any keyUp, keyDown, or keyPress events in your input fields. — Zunayed Shahriar
@monogate Working on a stackblitz now. When the user presses enter it calls the applyFilter function just like pressing the submit button it's just empty. I can add a keydown event to the form to check for enter and call the applyFilter function but that seems redundant. — dcp3450
@monogate added a stackblitz to my questions. It's not a pretty UI but the interaction I'm seeing is the same. angular-ivy-zhhdmx.stackblitz.io — dcp3450

dcp3450 dcp3450 · Accepted Answer · 2021-04-05T18:31:15

Here's how I ended up solving it:

Added a keydown event to the form:

(keydown)="enterSubmit($event)"

In the event I check for the enter key, prevent default and pass the form value:

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

I guess the enter button submits the form before applying the data changes and catching it then passing the form value captures the values?

Not 100% sure why this works or why it's done this way. If someone could comment with clarification that would be amazing.

Angular reactive form, enter submitting empty data but button submit works

1 Answers