Angular Forms In Depth

src/app/create-course/create-course-step-1/create-course-step-1.component.html

@@ -1,8 +1,6 @@
 
 <div [formGroup]="form">
 
-    <address-form legend="Address" formControlName="address"></address-form>
-
     <mat-form-field>
 
         <input matInput placeholder="Course title" formControlName="title" #title>

src/app/create-course/create-course-step-3/create-course-step-3.component.ts

@@ -9,6 +9,13 @@ import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
 })
 export class CreateCourseStep3Component {
 
+    form = this.fb.group({
 
+    });
+
+
+    constructor(private fb:FormBuilder) {
+
+    }
 
 }

src/app/create-course/create-course.component.html

@@ -21,9 +21,9 @@ <h2 class="title">Create New Course</h2>
         </mat-step>
 
 
-        <mat-step errorMessage="Pricing in error">
+        <mat-step [stepControl]="step2.form" errorMessage="Pricing in error">
 
-            <create-course-step-2></create-course-step-2>
+            <create-course-step-2 #step2></create-course-step-2>
 
             <ng-template matStepLabel>course pricing details</ng-template>
 
@@ -39,6 +39,23 @@ <h2 class="title">Create New Course</h2>
 
         </mat-step>
 
+        <mat-step [stepControl]="step3.form" errorMessage="Course lessons in error">
+
+            <ng-template matStepLabel>course lessons</ng-template>
+
+            <create-course-step-3 #step3></create-course-step-3>
+
+            <div class="stepper-buttons">
+
+                <button mat-raised-button matStepperPrevious>Back</button>
+
+                <button mat-raised-button color="primary"
+                    [disabled]="!step3.form.valid">Create Course</button>
+
+            </div>
+
+        </mat-step>
+
     </mat-horizontal-stepper>