diff --git a/src/app/components/expense/expense-form/expense-form.component.ts b/src/app/components/expense/expense-form/expense-form.component.ts index 02b93c5..61d3fcb 100644 --- a/src/app/components/expense/expense-form/expense-form.component.ts +++ b/src/app/components/expense/expense-form/expense-form.component.ts @@ -29,14 +29,13 @@ interface ExpenseForm { export class ExpenseFormComponent implements OnInit { public expense = input(); public disabled = input(false); - + public lastDate = input(undefined); public valid = output(); public dirty = output() public value = output(); private formValid = computed(() => this.form().valid() && this.form().dirty()); private formDirty = computed(() => this.form().dirty() && this.form().touched()); - private lastSelectedDate = signal(undefined); private formData = computed(() => this.buildForm(this.expense())); private formModel = signal(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()), diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts index 52fa70a..85506b4 100644 --- a/src/app/components/expense/expense.component.ts +++ b/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(); 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 { @@ -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();