feat: add form array

Author: Angular2Guy

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

@@ -17,8 +17,8 @@
 <div class="base-container">
 
 <form [formGroup]="bookForm">
-<button mat-flat-button color="primary" i18n="@@bookImportAddChapter">Add Chapter</button>
-<ng-container formArrayName="chapters">
+<button mat-flat-button color="primary" (click)="addChapter()" i18n="@@bookImportAddChapter">Add Chapter</button>
+<div class="chapters" formArrayName="chapters">
 @for(chaptersForm of chapters.controls;track chaptersForm) {
 	<div class="chapter-container" [formGroup]="chaptersForm">
 		<mat-form-field class="chapter-pages">
@@ -34,7 +34,7 @@
       </button>
 	</div>
 }
-</ng-container>
+</div>
 
 <input type="file" class="file-input"
        (change)="onFileSelected($event)" #fileUpload>

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

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

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

@@ -54,7 +54,17 @@ export class BookImportComponent {
 	}
 
 	protected removeChapter(chapterFg: FormGroup) {
-		console.log(chapterFg);
+		const chapterFormArray = this.bookForm.controls[FormGroupKey.chapters] as FormArray<FormGroup>;
+		for(let i = 0;i < chapterFormArray.length;i++) {
+			if(chapterFormArray.at(i) === chapterFg) {
+				chapterFormArray.removeAt(i);
+			}
+		}
+	}
+	
+	protected addChapter(): void {
+		const chapterFormArray = this.bookForm.controls[FormGroupKey.chapters] as FormArray<FormGroup>;
+		chapterFormArray.push(this.createChapterGroupForm());
 	}
 
 	protected createChapterGroupForm(): FormGroup {