created for validation and save button logic

src/app/components/add-expense/add-expense.component.html

@@ -15,12 +15,12 @@
 
         <mat-form-field appearance="outline">
           <mat-label>Cents</mat-label>
-          <input type="number" matInput [formField]="expenseForm.amount">
+          <input type="number" matInput [formField]="expenseForm.cents">
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Category</mat-label>
-          <input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.categoryId">
+          <input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category">
           <mat-autocomplete autoActiveFirstOption #categoryAuto="matAutocomplete">
             @for (category of categories(); track category.id) {
               <mat-option [value]="category.name">{{ category.name }}</mat-option>
@@ -30,7 +30,7 @@
 
         <mat-form-field appearance="outline">
           <mat-label>Merchant</mat-label>
-          <input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchantId">
+          <input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
           <mat-autocomplete autoActiveFirstOption #merchantAuto="matAutocomplete">
             @for (merchant of merchants(); track merchant.id) {
               <mat-option [value]="merchant.name">{{ merchant.name }}</mat-option>
@@ -51,14 +51,14 @@
 
         <mat-form-field appearance="outline" class="add-expense-note">
           <mat-label>Note</mat-label>
-          <textarea rows="1" matInput></textarea>
+          <textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
         </mat-form-field>
       </div>
     </mat-card-content>
 
     <mat-card-footer class="add-expense-footer">
       <mat-card-actions>
-        <button matButton="tonal" disabled="true">Save</button>
+        <button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
       </mat-card-actions>
     </mat-card-footer>
   </mat-card>

src/app/components/add-expense/add-expense.component.scss

@@ -8,13 +8,13 @@
 
 .add-expense-dropdowns {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   justify-content: space-between;
 }
 
 .add-expense-additional {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   justify-content: space-between;
 }
 

src/app/components/add-expense/add-expense.component.ts

@@ -1,8 +1,8 @@
 import { Component, computed, signal } from '@angular/core';
 import { CategoryService } from '../../services/category.service';
 import { MerchantService } from '../../services/merchant.service';
-import { Tag, TagService } from '../../services/tag.service';
+import { TagService } from '../../services/tag.service';
-import { form, FormField } from '@angular/forms/signals';
+import { form, FormField, min, required } from '@angular/forms/signals';
 import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -12,13 +12,13 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatButtonModule } from '@angular/material/button';
 import { provideNativeDateAdapter } from '@angular/material/core';
 
-interface AddExpenseForm {
+interface ExpenseForm {
-  date: Date,
+  date: Date;
-  amount: number | string,
+  cents: number;
-  categoryId: string,
+  category: string;
-  merchantId: string,
+  merchant: string;
-  note: string,
+  note: string;
-  tags: Tag[]
+  tags: string[];
 }
 
 @Component({
@@ -32,17 +32,40 @@ export class AddExpenseComponent {
   protected categories = computed(() => this.categoryService.categories());
   protected merchants = computed(() => this.merchantService.merchants());
   protected tags = computed(() => this.tagService.tags());
-  private addExpenseModel = signal<AddExpenseForm>({
+  protected enableSaveButton = computed(() => {
+    const dateValid = this.expenseForm.date().valid();
+    const centsValid = this.expenseForm.cents().valid();
+    const categoryValid = this.expenseForm.category().valid();
+    const merchantValid = this.expenseForm.merchant().valid();
+    const noteValid = this.expenseForm.note().valid();
+
+    return dateValid && centsValid && categoryValid && merchantValid && noteValid;
+  });
+
+  private defaultFormState: ExpenseForm = {
     date: new Date(),
-    amount: '',
+    cents: NaN,
-    categoryId: '',
+    category: '',
-    merchantId: '',
+    merchant: '',
     note: '',
     tags: []
+  };
+  private expenseModel = signal<ExpenseForm>(this.defaultFormState);
+  public expenseForm = form(this.expenseModel, (schema) => {
+    required(schema.date);
+    required(schema.cents);
+    min(schema.cents, 1);
+    required(schema.category);
   });
-  public expenseForm = form(this.addExpenseModel);
 
   public constructor(private readonly categoryService: CategoryService,
                      private readonly merchantService: MerchantService,
                      private readonly tagService: TagService) { }
+
+  public saveClick(): void {
+    const saveExpense = this.expenseModel();
+    console.log(saveExpense);
+    this.expenseModel.set({ ...this.defaultFormState, date: saveExpense.date });
+    this.expenseForm().reset(this.expenseModel());
+  }
 }