Angular Forms Course

Author: jhades

src/app/app.module.ts

@@ -41,6 +41,7 @@ import {CreateCourseStepOneComponent} from './create-course/create-course-step-o
 import {CreateCourseStepTwoComponent} from './create-course/create-course-step-two/create-course-step-two.component';
 import {MatStepperModule} from '@angular/material/stepper';
 import { AddressFormComponent } from './address-form/address-form.component';
+import {CreateCourseStepThreeComponent} from './create-course/create-course-step-three/create-course-step-three.component';
 
 @NgModule({
     declarations: [
@@ -56,6 +57,7 @@ import { AddressFormComponent } from './address-form/address-form.component';
         OnlyOneErrorPipe,
         CreateCourseStepOneComponent,
         CreateCourseStepTwoComponent,
+        CreateCourseStepThreeComponent,
         AddressFormComponent
     ],
     imports: [

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

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+
+@Component({
+  selector: 'create-course-step-three',
+  templateUrl: 'create-course-step-three.component.html',
+  styleUrls: ['create-course-step-three.component.scss']
+})
+export class CreateCourseStepThreeComponent {
+
+  form: FormGroup = this.fb.group({});
+
+
+  constructor(private fb: FormBuilder) {
+
+  }
+
+}

src/app/create-course/create-course-step-three/create-course-step-three.component.scss

@@ -31,6 +31,19 @@ <h2 class="title">Create New Course</h2>
 
     </mat-step>
 
+    <mat-step [stepControl]="stepThree.form" errorMessage="Course lessons in error">
+
+      <ng-template matStepLabel>course lessons</ng-template>
+
+      <create-course-step-three #stepThree></create-course-step-three>
+
+      <div class="stepper-buttons">
+        <button mat-raised-button  matStepperPrevious>Back</button>
+        <button mat-raised-button color="primary" matStepperNext [disabled]="!stepThree.form.valid">Create Course</button>
+      </div>
+
+    </mat-step>
+
   </mat-horizontal-stepper>
 
 </div>