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

@@ -1,18 +1,44 @@
 <div class="add-expense-container">
   <app-card [header]="'Add Expense'">
     <div class="add-expense-body">
-      <div>Date</div>
-      <div>Amount</div>
-      <div>Category</div>
-      <div>Merchant</div>
+      <div>
+        Date: <input type="date" [formField]="expenseForm.date">
+      </div>
+
+      <div>
+        Cents (required):
+        <input type="number" placeholder="Enter amount" [formField]="expenseForm.amount">
+      </div>
+
+      <div>
+        Category (required):
+        <select [formField]="expenseForm.categoryId">
+          <option value="">Select a category</option>
+          @for (category of categories(); track category.id) {
+            <option [value]="category.id">{{ category.name }}</option>
+          }
+        </select>
+      </div>
     </div>
 
     <div>
-      Note
+      Merchant (optional):
+      <select [formField]="expenseForm.merchantId">
+        <option value="">Select a merchant</option>
+        @for (merchant of merchants(); track merchant.id) {
+          <option [value]="merchant.id">{{ merchant.name }}</option>
+        }
+      </select>
     </div>
 
+    <div>
+      Note (optional): <input type="text" [formField]="expenseForm.note">
+    </div>
+
+    <div>Tags</div>
+
     <div class="card-footer">
-      <div>Tags</div>
+      <button>Save</button>
     </div>
   </app-card>
 </div>

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

@@ -1,5 +1,5 @@
 .add-expense-body {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 0.5rem;
 }

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

@@ -1,14 +1,41 @@
-import { Component } from '@angular/core';
-import {CardComponent} from '../card/card.component';
+import {Component, computed, signal} from '@angular/core';
+import { CardComponent } from '../card/card.component';
+import {Category, CategoryService} from '../../services/category.service';
+import {Merchant, MerchantService} from '../../services/merchant.service';
+import { Tag } from '../../services/tag.service';
+import {form, FormField} from '@angular/forms/signals';
+
+interface AddExpenseForm {
+  date: Date,
+  amount: number | string,
+  categoryId: string,
+  merchantId: string,
+  note: string,
+  tags: Tag[]
+}
 
 @Component({
   selector: 'app-add-expense',
   imports: [
-    CardComponent
+    CardComponent,
+    FormField
   ],
   templateUrl: './add-expense.component.html',
   styleUrl: './add-expense.component.scss',
 })
 export class AddExpenseComponent {
+  protected categories = computed(() => this.categoryService.categories());
+  protected merchants = computed(() => this.merchantService.merchants());
+  private addExpenseModel = signal<AddExpenseForm>({
+    date: new Date(),
+    amount: '',
+    categoryId: '',
+    merchantId: '',
+    note: '',
+    tags: []
+  });
+  public expenseForm = form(this.addExpenseModel);
 
+  public constructor(private readonly categoryService: CategoryService,
+                     private readonly merchantService: MerchantService) { }
 }