💄 Support Enter keypress to validate form

src/src/app/modals/category-create-modal/category-create-modal.component.html

@@ -1,6 +1,6 @@
 <div pFocusTrap class="grid items-center gap-4" [formGroup]="categoryForm">
   <p-floatlabel variant="in">
-    <input id="name" formControlName="name" pInputText fluid />
+    <input id="name" formControlName="name" pInputText fluid (keyup.enter)="closeDialog()" />
     <label for="name">Name</label>
   </p-floatlabel>
 

src/src/app/modals/category-create-modal/category-create-modal.component.ts

@@ -49,6 +49,7 @@ export class CategoryCreateModalComponent {
   closeDialog() {
     // Normalize data for API POST
     let ret = this.categoryForm.value;
+    if (!ret["name"]) return;
     if (!this.updatedImage) delete ret["image"];
     this.ref.close(ret);
   }

src/src/app/modals/trip-create-day-modal/trip-create-day-modal.component.html

@@ -1,7 +1,7 @@
 <section>
   <div [formGroup]="dayForm">
     <p-floatlabel variant="in">
-      <input id="label" formControlName="label" pInputText fluid />
+      <input id="label" formControlName="label" pInputText fluid (keyup.enter)="closeDialog()" />
       <label for="label">Label</label>
     </p-floatlabel>
   </div>

src/src/app/modals/trip-create-day-modal/trip-create-day-modal.component.ts

@@ -1,5 +1,10 @@
 import { Component } from "@angular/core";
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { ButtonModule } from "primeng/button";
 import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
 import { FloatLabelModule } from "primeng/floatlabel";
@@ -8,7 +13,12 @@ import { TripDay } from "../../types/trip";
 
 @Component({
   selector: "app-trip-create-day-modal",
-  imports: [FloatLabelModule, InputTextModule, ButtonModule, ReactiveFormsModule],
+  imports: [
+    FloatLabelModule,
+    InputTextModule,
+    ButtonModule,
+    ReactiveFormsModule,
+  ],
   standalone: true,
   templateUrl: "./trip-create-day-modal.component.html",
   styleUrl: "./trip-create-day-modal.component.scss",
@@ -20,7 +30,7 @@ export class TripCreateDayModalComponent {
   constructor(
     private ref: DynamicDialogRef,
     private fb: FormBuilder,
-    private config: DynamicDialogConfig
+    private config: DynamicDialogConfig,
   ) {
     this.dayForm = this.fb.group({
       id: -1,
@@ -37,6 +47,7 @@ export class TripCreateDayModalComponent {
   closeDialog() {
     // Normalize data for API POST
     let ret = this.dayForm.value;
+    if (!ret["label"]) return;
     this.ref.close(ret);
   }
 }

src/src/app/modals/trip-create-modal/trip-create-modal.component.html

@@ -1,6 +1,6 @@
 <div pFocusTrap class="grid items-center gap-4" [formGroup]="tripForm">
   <p-floatlabel variant="in">
-    <input id="name" formControlName="name" pInputText fluid />
+    <input id="name" formControlName="name" pInputText fluid (keyup.enter)="closeDialog()" />
     <label for="name">Name</label>
   </p-floatlabel>
 

src/src/app/modals/trip-create-modal/trip-create-modal.component.ts

@@ -1,5 +1,10 @@
 import { Component } from "@angular/core";
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { ButtonModule } from "primeng/button";
 import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
 import { FloatLabelModule } from "primeng/floatlabel";
@@ -8,7 +13,13 @@ import { FocusTrapModule } from "primeng/focustrap";
 
 @Component({
   selector: "app-trip-create-modal",
-  imports: [FloatLabelModule, InputTextModule, ButtonModule, ReactiveFormsModule, FocusTrapModule],
+  imports: [
+    FloatLabelModule,
+    InputTextModule,
+    ButtonModule,
+    ReactiveFormsModule,
+    FocusTrapModule,
+  ],
   standalone: true,
   templateUrl: "./trip-create-modal.component.html",
   styleUrl: "./trip-create-modal.component.scss",
@@ -21,7 +32,7 @@ export class TripCreateModalComponent {
   constructor(
     private ref: DynamicDialogRef,
     private fb: FormBuilder,
-    private config: DynamicDialogConfig
+    private config: DynamicDialogConfig,
   ) {
     this.tripForm = this.fb.group({
       id: -1,
@@ -40,6 +51,7 @@ export class TripCreateModalComponent {
   closeDialog() {
     // Normalize data for API POST
     let ret = this.tripForm.value;
+    if (!ret["name"]) return;
     if (ret["image_id"]) {
       delete ret["image"];
       delete ret["image_id"];