feat: update forms

Author: Angular2Guy

frontend/src/angular/src/app/book-import/book-import.component.html

@@ -21,8 +21,17 @@
 <ng-container formArrayName="chapters">
 @for(chaptersForm of chapters.controls;track chaptersForm) {
 	<div class="chapter-container" [formGroup]="chaptersForm">
-		<div>A</div>
-		<div>B</div>
+		<mat-form-field class="chapter-pages">
+    	<mat-label>First Page</mat-label>
+    	<input matInput [formControlName]="FormGroupKey.chapterStart" placeholder="first page">
+  		</mat-form-field>		
+		<mat-form-field class="chapter-pages">
+    	<mat-label>Last Page</mat-label>
+    	<input matInput [formControlName]="FormGroupKey.chapterEnd" placeholder="last page">
+  		</mat-form-field>
+  		<button mat-icon-button (click)="removeChapter(chaptersForm)">
+        <mat-icon>remove</mat-icon>
+      </button>
 	</div>
 }
 </ng-container>

frontend/src/angular/src/app/book-import/book-import.component.scss

@@ -41,4 +41,11 @@
 
 .chapter-container {
 	display: flex;
+	margin-top: 20px;
+	align-items: center;
+}
+
+.chapter-pages {
+	width: 200px;
+	margin: 10px;
 }

frontend/src/angular/src/app/book-import/book-import.component.ts

@@ -20,6 +20,8 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 enum FormGroupKey{
 	file='file',
@@ -31,7 +33,7 @@ enum FormGroupKey{
 @Component({
   selector: 'app-book-import',
   standalone: true,
-  imports: [MatIconModule,MatToolbarModule,MatButtonModule,ReactiveFormsModule, CommonModule],
+  imports: [MatIconModule,MatToolbarModule,MatButtonModule,ReactiveFormsModule, CommonModule,MatFormFieldModule,MatInputModule],
   templateUrl: './book-import.component.html',
   styleUrl: './book-import.component.scss'
 })
@@ -51,6 +53,10 @@ export class BookImportComponent {
 		return this.bookForm.controls[FormGroupKey.chapters] as FormArray<FormGroup>;
 	}
 
+	protected removeChapter(chapterFg: FormGroup) {
+		console.log(chapterFg);
+	}
+	
 	protected createChapterGroupForm(): FormGroup {
 		return new FormGroup({
 			[FormGroupKey.chapterStart]: new FormControl(0, Validators.required),