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

@@ -29,14 +29,13 @@ interface ExpenseForm {
 export class ExpenseFormComponent implements OnInit {
   public expense = input<Expense>();
   public disabled = input<boolean>(false);
-
+  public lastDate = input<Date | undefined>(undefined);
   public valid = output<boolean>();
   public dirty = output<boolean>()
   public value = output();
 
   private formValid = computed(() => this.form().valid() && this.form().dirty());
   private formDirty = computed(() => this.form().dirty() && this.form().touched());
-  private lastSelectedDate = signal<Date | undefined>(undefined);
   private formData = computed(() => this.buildForm(this.expense()));
   private formModel = signal<ExpenseForm>(this.formData());
 
@@ -46,8 +45,8 @@ export class ExpenseFormComponent implements OnInit {
   protected form = form(this.formModel, this.buildFormOptions());
 
   constructor(private readonly categoryService: CategoryService,
-                     private readonly merchantService: MerchantService,
-                     private readonly tagService: TagService) {
+              private readonly merchantService: MerchantService,
+              private readonly tagService: TagService) {
     effect(() => {
       this.valid.emit(this.formValid());
       this.dirty.emit(this.formDirty());
@@ -55,7 +54,10 @@ export class ExpenseFormComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    console.log({ expense: this.expense() });
+    this.reset();
+  }
+
+  public reset(): void {
     this.formModel.set(this.formData());
     this.form().reset();
   }
@@ -65,7 +67,7 @@ export class ExpenseFormComponent implements OnInit {
   }
 
   private buildForm(expense?: Expense): ExpenseForm {
-    let formData = { date: this.lastSelectedDate() ?? '', cents: '', category: '', merchant: '', note: '', tags: ''} as unknown as ExpenseForm
+    let formData = { date: this.lastDate() ?? '', cents: '', category: '', merchant: '', note: '', tags: ''} as unknown as ExpenseForm
     if (expense) {
       formData = {
         date: new Date(expense.date.toString()),

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

@@ -1,4 +1,4 @@
-import { Component, input, model, signal } from '@angular/core';
+import { Component, input, model, signal, viewChild } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { Expense, ExpenseService } from '../../services/expense.service';
@@ -14,6 +14,7 @@ import { CurrencyPipe, DatePipe } from '@angular/common';
   styleUrl: './expense.component.scss',
 })
 export class ExpenseComponent {
+  private form = viewChild(ExpenseFormComponent);
   public expense = input<Expense>();
 
   public editingExpense = signal(false);
@@ -31,7 +32,7 @@ export class ExpenseComponent {
   }
 
   public resetAddClick(): void {
-    console.log('Reset Add expense form');
+    this.resetForm();
   }
 
   public async updateClick(): Promise<void> {
@@ -40,8 +41,12 @@ export class ExpenseComponent {
   }
 
   public cancelUpdateClick(): void {
-    console.log('Canceling update');
     this.editingExpense.set(false);
+    this.resetForm();
+  }
+
+  private resetForm(): void {
+    this.form()?.reset();
   }
 
   // const saveExpenseModel = this.expenseModel();