Form submit

src/app/details/details.component.html

@@ -38,4 +38,55 @@
       </section>
     </div>
   </div>
+
+  <section class="mt-5">
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <div class="bg-light p-4 rounded shadow-sm">
+          <h2 class="h3 mb-4 text-primary border-bottom pb-2">Apply now</h2>
+
+          <form [formGroup]="applyForm" (submit)="submitApplication()" class="needs-validation">
+            <div class="mb-3">
+              <label for="first-name" class="form-label">First Name</label>
+              <input
+                id="first-name"
+                type="text"
+                class="form-control"
+                formControlName="firstName"
+                placeholder="Enter your first name"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="last-name" class="form-label">Last Name</label>
+              <input
+                id="last-name"
+                type="text"
+                class="form-control"
+                formControlName="lastName"
+                placeholder="Enter your last name"
+              />
+            </div>
+
+            <div class="mb-4">
+              <label for="email" class="form-label">Email</label>
+              <input
+                id="email"
+                type="email"
+                class="form-control"
+                formControlName="email"
+                placeholder="Enter your email"
+              />
+            </div>
+
+            <div class="d-grid">
+              <button type="submit" class="btn btn-primary btn-lg">
+                <i class="bi bi-send me-2"></i>Submit Application
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
 </article>

src/app/details/details.component.ts

@@ -2,11 +2,14 @@ import {Component, inject} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {HousingService} from '../housing.service';
 import {HousingLocation} from '../housing-location';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-details',
   standalone: true,
-  imports: [],
+  imports: [
+    ReactiveFormsModule
+  ],
   templateUrl: './details.component.html',
   styleUrl: './details.component.css'
 })
@@ -15,8 +18,22 @@ export class DetailsComponent {
   housingService = inject(HousingService);
   housingLocation: HousingLocation | undefined;
 
+  applyForm = new FormGroup({
+    firstName: new FormControl(''),
+    lastName: new FormControl(''),
+    email: new FormControl(''),
+  });
+
   constructor() {
     const housingLocationId = Number(this.route.snapshot.params['id']);
     this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
   }
+
+  submitApplication() {
+    this.housingService.submitApplication(
+      this.applyForm.value.firstName ?? '',
+      this.applyForm.value.lastName ?? '',
+      this.applyForm.value.email ?? '',
+    );
+  }
 }

src/app/housing.service.ts

@@ -105,4 +105,8 @@ export class HousingService {
   getHousingLocationById(id: number): HousingLocation | undefined {
     return this.housingLocationList.find((housingLocation) => housingLocation.id === id);
   }
+
+  submitApplication(firstName: string, lastName: string, email: string) {
+    console.log(`Homes application received: firstName: ${firstName}, lastName: ${lastName}, email: ${email}.`,);
+  }
 }