Angular Forms In Depth

Author: Your Name

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

@@ -55,11 +55,11 @@
 
 </div>
 
-<div class="form-val">
+<!--div class="form-val">
 
     {{form.value | json}}
 
-</div>
+</div-->
 
 
 

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

@@ -30,8 +30,8 @@ export class CreateCourseStep1Component implements OnInit {
       releasedAt: [new Date(), Validators.required],
       category: ['BEGINNER', Validators.required],
       downloadsAllowed: [false, Validators.requiredTrue],
-      longDescription: ['', [Validators.required, Validators.minLength(3)]],
-      address: [null, Validators.required]
+      longDescription: ['', [Validators.required, Validators.minLength(3)]]
+      //address: [null, Validators.required]
   });
 
   courseCategories$ : Observable<CourseCategory[]>;

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

@@ -41,7 +41,7 @@
 
 </div>
 
-<div class="form-val">
+<!--div class="form-val">
 
     Form validity state: {{form.valid }}
 
@@ -51,4 +51,4 @@
 
     {{form.value | json}}
 
-</div>
+</div-->

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

@@ -3,7 +3,7 @@
 
   <h2 class="title">Create New Course</h2>
 
-    <mat-horizontal-stepper [linear]="false"
+    <mat-horizontal-stepper [linear]="true"
                             class="mat-elevation-z5" labelPosition="bottom">
 
         <mat-step [stepControl]="step1.form" errorMessage="Landing page in error">
@@ -50,7 +50,10 @@ <h2 class="title">Create New Course</h2>
                 <button mat-raised-button matStepperPrevious>Back</button>
 
                 <button mat-raised-button color="primary"
-                    [disabled]="!step3.form.valid">Create Course</button>
+                    [disabled]="!step3.form.valid || step3.lessons.length == 0"
+                    (click)="submit(step1.form.value, step2.form.value, step3.form.value)">
+                    Create Course
+                </button>
 
             </div>
 

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

@@ -17,15 +17,15 @@ import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
 export class CreateCourseComponent implements OnInit {
 
 
-
-
   ngOnInit() {
 
-
-
   }
 
 
+    submit(step1, step2, step3) {
+
+      console.log(step1, step2, step3);
 
+    }
 
 }