How to remove validation behavior with Enter key

Question

I created a customer order form in my application and I would like it to be validated only when the user clicks on the validation button.

Currently, this is the case, but if the user presses the Enter key, the validation is done automatically

How to avoid this behavior?

The html:

<form [formGroup]="orderForm">
  <div class="container form-container">
    <h4 class="container__title">{{ 'order.form.message.printout' | translate }}</h4>

    <!--Type de produit-->
    <div formArrayName="orders" ngDefaultControl>
      <div *ngFor="let order of ordersFormArray.controls; let i = index">
        <div [formGroupName]="i">
          <mat-form-field appearance="fill" class="A-form-field">
            <mat-label>{{
              'order.form.field.product' | translate
              }}</mat-label>
            <mat-select
              formControlName="produit"
              (selectionChange)="productChangeAction($event.value, i)"
            >

              <mat-option
                id="{{ 'label-option' + i }}"
                *ngFor="let product of productList"
                [value]="product.label"
              >
                {{ product.label }}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <!--Documents associés au produit-->
          <mat-form-field appearance="fill" class="A-form-field">
            <mat-label>{{
              'order.form.field.documents' | translate
              }}</mat-label>
            <mat-select
              formControlName="document"
            >
              <mat-option
                *ngFor="let document of documents[i]"
                [value]="document.label"
              >
                {{ document.label }}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <!--Quantité document commandé-->
          <mat-form-field appearance="fill" class="A-form-field">
            <mat-label>{{ 'order.form.field.maxQuantity' | translate }}</mat-label>
            <input matInput type="number" formControlName="quantite"/>
          </mat-form-field>

          <mat-icon (click)="removeOrder(i)">delete_outline</mat-icon>

          <mat-error
            *ngIf="ordersFormArray.controls[i]?.hasError('validateQuantity')">
            {{ 'order.form.message.documentsAuthorizedQuantityError' | translate: {
            maxQuantity: ordersFormArray.controls[i].getError('validateQuantity').max,
            documentLabel: ordersFormArray.controls[i].getError('validateQuantity').documentLabel
          } }}
          </mat-error>
        </div>
      </div>
    </div>

    <button mat-raised-button
            type="button"
            color="primary"
            data-test="add-order-button"
            (click)="addOrder()"
            class="add-order-button">
      <mat-icon>add</mat-icon>
      {{ 'order.form.button.addOrder' | translate }}
    </button>
  </div>

  <div class="container">
    <h4 class="container__title">{{ 'order.form.message.leaveComment' | translate }}</h4>
    <mat-form-field class="B-form-field" >
      <mat-label>{{ 'order.form.message.yourMessage' | translate }}</mat-label>
      <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" formControlName="message" maxlength="130"></textarea>
    </mat-form-field>
    <div class="buttons-right">
      <button type="button" class="order-button"
              mat-raised-button
              color="primary"
              [xenNavigationDirective]="goBackHome['link']"
              [routerLink]="userRealm + goBackHome['route']"
      >
        <mat-icon>not_interested</mat-icon>
        {{ 'order.form.button.cancel' | translate }}
      </button>

      <button type="submit" class="order-button"
              mat-raised-button
              color="primary"
              [disabled]="!orderForm.valid"
              (click)="onSendOrders()"
      >
        <mat-icon>check</mat-icon>
        {{ 'order.form.button.sendOrder' | translate }}
      </button>
    </div>

  </div>
</form>

ts, the method which is triggered to the validation button:

protected onSendOrders(): void {
  this.spinner.show();

  let order: ICommande = {
    message: this.orderForm.get('message')?.value,
    detail: this.ordersFormArray.value
  };
  this.order
    .sendOrders(order)
    .pipe(
      take(1),
      finalize(() => this.spinner.hide())
    )
    .subscribe({
      next: () => {
        this.notification.success('order.form.message.sendOrderSuccess');
      },
      error: () => {
        this.notification.error('order.form.message.sendOrderFail');
      }
    });
}

In the screenshot click on validation button is OK, but the form is validated at the press Enter key.

Is [this](https://stackoverflow.com/questions/50010345/angular-stop-enter-key-from-submitting) helping ? — Alexis, Mar 22 '23 at 08:50
I assume that the Enter key submits the form, so why wouldn't you want to validate in that case? — Mark Rotteveel, Mar 22 '23 at 09:22
You should not remove validator. You should not show the error until you want (click the validator button). So a simple variable and *ngIf can be enough. — Eliseo, Mar 22 '23 at 09:27

score 0 · Answer 1 · answered Mar 22 '23 at 10:09

0

I found a solution with adding this code:

    (keydown.enter)="$event.preventDefault()"

answered Mar 22 '23 at 10:09

Olivier

343
2
16

How to remove validation behavior with Enter key

1 Answers1