Angular Forms In Depth

angular-university · Jan 29, 2021 · 2b6b2b5 · 2b6b2b5
1 parent 18e901d
commit 2b6b2b5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/src/app/create-course/create-course-step-3/create-course-step-3.component.html b/src/app/create-course/create-course-step-3/create-course-step-3.component.html
@@ -3,29 +3,40 @@ <h3>Add Course Lessons:</h3>
 
 <div class="add-lessons-form" [formGroup]="form">
 
-    <div class="lesson-form-row">
+    <ng-container formArrayName="lessons">
 
-        <mat-form-field appearance="fill">
+        <ng-container *ngFor="let lessonForm of lessons.controls">
 
-            <input matInput placeholder="Lesson title">
+            <div class="lesson-form-row" [formGroup]="lessonForm">
 
-        </mat-form-field>
+                <mat-form-field appearance="fill">
 
-        <mat-form-field appearance="fill">
+                    <input matInput
+                           formControlName="title"
+                           placeholder="Lesson title">
 
-            <mat-select placeholder="Lesson level">
-                <mat-option value="beginner">Beginner</mat-option>
-                <mat-option value="intermediate">Intermediate</mat-option>
-                <mat-option value="advanced">Advanced</mat-option>
-            </mat-select>
+                </mat-form-field>
 
-        </mat-form-field>
+                <mat-form-field appearance="fill">
 
-        <mat-icon class="delete-btn">delete_forever</mat-icon>
+                    <mat-select formControlName="level"
+                            placeholder="Lesson level">
+                        <mat-option value="beginner">Beginner</mat-option>
+                        <mat-option value="intermediate">Intermediate</mat-option>
+                        <mat-option value="advanced">Advanced</mat-option>
+                    </mat-select>
 
-    </div>
+                </mat-form-field>
 
-    <button mat-mini-fab>
+                <mat-icon class="delete-btn">delete_forever</mat-icon>
+
+            </div>
+
+        </ng-container>
+
+    </ng-container>
+
+    <button mat-mini-fab (click)="addLesson()">
         <mat-icon class="add-course-btn">add</mat-icon>
     </button>
 

diff --git a/src/app/create-course/create-course-step-3/create-course-step-3.component.ts b/src/app/create-course/create-course-step-3/create-course-step-3.component.ts
@@ -10,12 +10,25 @@ import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class CreateCourseStep3Component {
 
     form = this.fb.group({
-
+        lessons: this.fb.array([])
     });
 
 
     constructor(private fb:FormBuilder) {
 
     }
 
+    get lessons() {
+        return this.form.controls["lessons"] as FormArray;
+    }
+
+    addLesson() {
+
+        const lessonForm = this.fb.group({
+            title: ['', Validators.required],
+            level: ['beginner', Validators.required]
+        });
+
+        this.lessons.push(lessonForm);
+    }
 }