Angular Forms In Depth

Author: Your Name

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

@@ -27,6 +27,18 @@
 
     </mat-form-field>
 
+    <mat-checkbox color="primary" formControlName="downloadsAllowed">
+        Downloads allowed?
+    </mat-checkbox>
+
+    <mat-form-field appearance="outline">
+
+        <textarea matInput placeholder="Description" formControlName="longDescription">
+
+        </textarea>
+
+    </mat-form-field>
+
 </div>
 
 <div class="form-val">

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

@@ -22,7 +22,9 @@ export class CreateCourseStep1Component implements OnInit {
           asyncValidators: [courseTitleValidator(this.courses)],
           updateOn: 'blur'
       }],
-      releasedAt: [new Date(), Validators.required]
+      releasedAt: [new Date(), Validators.required],
+      downloadsAllowed: [false, Validators.requiredTrue],
+      longDescription: ['', [Validators.required, Validators.minLength(3)]]
   });
 
   constructor(private fb: FormBuilder, private courses:CoursesService) {

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

@@ -3,13 +3,14 @@
 
   <h2 class="title">Create New Course</h2>
 
-    <mat-horizontal-stepper class="mat-elevation-z5" labelPosition="bottom">
+    <mat-horizontal-stepper [linear]="true"
+                            class="mat-elevation-z5" labelPosition="bottom">
 
-        <mat-step>
+        <mat-step [stepControl]="step1.form">
 
             <ng-template matStepLabel>course landing page details</ng-template>
 
-            <create-course-step-1></create-course-step-1>
+            <create-course-step-1 #step1></create-course-step-1>
 
             <div class="stepper-buttons">
 
@@ -19,6 +20,25 @@ <h2 class="title">Create New Course</h2>
 
         </mat-step>
 
+
+        <mat-step>
+
+            <create-course-step-2></create-course-step-2>
+
+            <ng-template matStepLabel>course pricing details</ng-template>
+
+            <div class="stepper-buttons">
+
+                <button mat-raised-button matStepperPrevious>Back</button>
+
+                <button mat-raised-button color="primary" matStepperNext>
+                    Continue to Step 3</button>
+
+            </div>
+
+
+        </mat-step>
+
     </mat-horizontal-stepper>