Updated contact form

src/app/components/contact/contact.component.html

@@ -1,25 +1,28 @@
 <div class="d-flex flex-column-reverse flex-md-row justify-content-center cap-width">
 	<div style="flex: 2 0 0;">
-		<form>
+		<div *ngIf="error" class="alert alert-danger py-2">
+			Coming Soon: This feature is under development
+		</div>
+		<form [formGroup]="form">
 			<div>
 				<mat-form-field appearance="fill" class="w-100">
 					<mat-label>Email</mat-label>
-					<input matInput>
+					<input matInput formControlName="email">
 				</mat-form-field>
 			</div>
 			<div>
 				<mat-form-field appearance="fill" class="w-100">
 					<mat-label>Subject</mat-label>
-					<mat-select [(value)]="contact">
-						<mat-option value="general">General Inquiry</mat-option>
-						<mat-option value="castra">Castra Event</mat-option>
+					<mat-select [(value)]="contact" formControlName="subject">
+						<mat-option value="General">General Inquiry</mat-option>
+						<mat-option value="Castra">Castra Event</mat-option>
 					</mat-select>
 				</mat-form-field>
 			</div>
 			<div>
 				<mat-form-field appearance="fill" class="w-100">
 					<mat-label>Message</mat-label>
-					<textarea matInput rows="10"></textarea>
+					<textarea matInput rows="10" formControlName="body"></textarea>
 				</mat-form-field>
 			</div>
 			<div class="d-flex justify-content-between align-items-center">
@@ -27,7 +30,8 @@
 					<mat-checkbox color="primary">Send me a copy</mat-checkbox>
 				</div>
 				<div>
-					<button mat-raised-button color="primary">Send</button>
+					<button mat-stroked-button class="me-3" (click)="reset()">Reset</button>
+					<button mat-raised-button color="primary" (click)="error = true">Send</button>
 				</div>
 			</div>
 		</form>

src/app/components/contact/contact.component.ts

@@ -1,9 +1,25 @@
 import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
 	selector: 'app-contact',
 	templateUrl: './contact.component.html'
 })
 export class ContactComponent {
-	contact: string = '';
+	public contact: string = '';
+	public error = false;
+	public form!: FormGroup;
+
+	constructor(private fb: FormBuilder) {
+		this.form = fb.group({
+			email: '',
+			subject: '',
+			body: '',
+		});
+	}
+
+	reset() {
+		this.error = false;
+		this.form.reset();
+	}
 }

src/app/components/navbar/navbar.component.scss

@@ -1,4 +1,5 @@
 .navbar-spacing {
+	position: relative;
 	height: 64px;
 	width: 100%;
 }