Angular Forms Course

Author: jhades

src/app/app.module.ts

@@ -37,11 +37,11 @@ import {PasswordStrengthDirective} from './directives/password-strength.directiv
 import {OnlyOneErrorPipe} from './pipes/only-one-error.pipe';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {CreateCourseStepOneComponent} from './create-course/create-course-step-one/create-course-step-one.component';
 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';
+import {CreateCourseStep1Component} from './create-course/create-course-step-1/create-course-step-1.component';
 
 @NgModule({
     declarations: [
@@ -55,7 +55,7 @@ import {CreateCourseStepThreeComponent} from './create-course/create-course-step
         CreateCourseComponent,
         PasswordStrengthDirective,
         OnlyOneErrorPipe,
-        CreateCourseStepOneComponent,
+        CreateCourseStep1Component,
         CreateCourseStepTwoComponent,
         CreateCourseStepThreeComponent,
         AddressFormComponent

src/app/create-course/create-course-step-one/create-course-step-one.component.html renamed to src/app/create-course/create-course-step-1/create-course-step-1.component.html

@@ -7,11 +7,11 @@ import {Observable} from 'rxjs';
 import {courseTitleValidator} from '../../validators/course-title.validator';
 
 @Component({
-  selector: 'create-course-step-one',
-  templateUrl: './create-course-step-one.component.html',
-  styleUrls: ['./create-course-step-one.component.scss']
+  selector: 'create-course-step-1',
+  templateUrl: './create-course-step-1.component.html',
+  styleUrls: ['./create-course-step-1.component.scss']
 })
-export class CreateCourseStepOneComponent implements OnInit {
+export class CreateCourseStep1Component implements OnInit {
 
   form: FormGroup;
 

src/app/create-course/create-course-step-one/create-course-step-one.component.scss renamed to src/app/create-course/create-course-step-1/create-course-step-1.component.scss

@@ -6,14 +6,14 @@ <h2 class="title">Create New Course</h2>
 
   <mat-horizontal-stepper class="mat-elevation-z5" labelPosition="bottom">
 
-    <mat-step [stepControl]="stepOne.form" errorMessage="Landing page in error">
+    <mat-step [stepControl]="step1.form" errorMessage="Landing page in error">
 
         <ng-template matStepLabel>course landing page details</ng-template>
 
-        <create-course-step-one #stepOne></create-course-step-one>
+        <create-course-step-1 #step1></create-course-step-1>
 
         <div class="stepper-buttons">
-          <button mat-raised-button color="primary" matStepperNext [disabled]="!stepOne.form.valid">Continue to Step 2</button>
+          <button mat-raised-button color="primary" matStepperNext [disabled]="!step1.form.valid">Continue to Step 2</button>
         </div>
 
     </mat-step>
@@ -40,7 +40,7 @@ <h2 class="title">Create New Course</h2>
       <div class="stepper-buttons">
         <button mat-raised-button  matStepperPrevious>Back</button>
         <button mat-raised-button color="primary" matStepperNext [disabled]="!stepThree.form.valid"
-        (click)="submit(stepOne.form.value, stepTwo.form.value, stepThree.form.value)">
+        (click)="submit(step1.form.value, stepTwo.form.value, stepThree.form.value)">
           Create Course
         </button>
       </div>