joe/common-cents-web
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

added form resetting

Browse source
This commit is contained in:
Joe Arndt 2026-02-22 15:26:10 -06:00
parent 2ca674c3bb
commit 21e3741b21
2 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/components/expense/expense-form/expense-form.component.ts
View file

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

11
src/app/components/expense/expense.component.ts
View file

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