Angular Forms Course

Author: jhades

src/app/address-form/address-form.component.ts

@@ -95,8 +95,6 @@ export class AddressFormComponent implements ControlValueAccessor, OnDestroy, Va
     errors = this.addControlErrors(errors, "zipCode");
     errors = this.addControlErrors(errors, "city");
 
-    console.log("errors", errors);
-
     return errors;
   }
 

src/app/app.module.ts

@@ -28,19 +28,18 @@ import {CoursesService} from "./services/courses.service";
 import {HttpClientModule} from "@angular/common/http";
 import {CourseResolver} from "./services/course.resolver";
 import { CourseDialogComponent } from './course-dialog/course-dialog.component';
-import {FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule} from '@angular/forms';
-import {MatMomentDateModule} from "@angular/material-moment-adapter";
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LoginComponent} from './login/login.component';
 import { CreateCourseComponent } from './create-course/create-course.component';
 import {MatNativeDateModule} from '@angular/material/core';
 import {PasswordStrengthDirective} from './directives/password-strength.directive';
 import {OnlyOneErrorPipe} from './pipes/only-one-error.pipe';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {CreateCourseStepTwoComponent} from './create-course/create-course-step-two/create-course-step-two.component';
+import {CreateCourseStep2Component} from './create-course/create-course-step-2/create-course-step-2.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 {CreateCourseStep3Component} from './create-course/create-course-step-3/create-course-step-3.component';
 import {CreateCourseStep1Component} from './create-course/create-course-step-1/create-course-step-1.component';
 
 @NgModule({
@@ -56,8 +55,8 @@ import {CreateCourseStep1Component} from './create-course/create-course-step-1/c
         PasswordStrengthDirective,
         OnlyOneErrorPipe,
         CreateCourseStep1Component,
-        CreateCourseStepTwoComponent,
-        CreateCourseStepThreeComponent,
+        CreateCourseStep2Component,
+        CreateCourseStep3Component,
         AddressFormComponent
     ],
     imports: [

src/app/create-course/create-course-step-two/create-course-step-two.component.html renamed to src/app/create-course/create-course-step-2/create-course-step-2.component.html

@@ -4,11 +4,11 @@ import {createPromoRangeValidator} from '../../validators/date-range.validator';
 
 
 @Component({
-  selector: 'create-course-step-two',
-  templateUrl: 'create-course-step-two.component.html',
-  styleUrls: ['create-course-step-two.component.scss']
+  selector: 'create-course-step-2',
+  templateUrl: 'create-course-step-2.component.html',
+  styleUrls: ['create-course-step-2.component.scss']
 })
-export class CreateCourseStepTwoComponent implements OnInit {
+export class CreateCourseStep2Component implements OnInit {
 
   form: FormGroup;
 

src/app/create-course/create-course-step-two/create-course-step-two.component.scss renamed to src/app/create-course/create-course-step-2/create-course-step-2.component.scss

@@ -3,11 +3,11 @@ import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 
 @Component({
-  selector: 'create-course-step-three',
-  templateUrl: 'create-course-step-three.component.html',
-  styleUrls: ['create-course-step-three.component.scss']
+  selector: 'create-course-step-3',
+  templateUrl: 'create-course-step-3.component.html',
+  styleUrls: ['create-course-step-3.component.scss']
 })
-export class CreateCourseStepThreeComponent {
+export class CreateCourseStep3Component {
 
   form: FormGroup = this.fb.group({
     lessons: this.fb.array([])

src/app/create-course/create-course-step-two/create-course-step-two.component.ts renamed to src/app/create-course/create-course-step-2/create-course-step-2.component.ts

@@ -18,29 +18,29 @@ <h2 class="title">Create New Course</h2>
 
     </mat-step>
 
-    <mat-step [stepControl]="stepTwo.form" errorMessage="Course pricing in error">
+    <mat-step [stepControl]="step2.form" errorMessage="Course pricing in error">
 
       <ng-template matStepLabel>course pricing details</ng-template>
 
-      <create-course-step-two #stepTwo></create-course-step-two>
+      <create-course-step-2 #step2></create-course-step-2>
 
       <div class="stepper-buttons">
         <button mat-raised-button  matStepperPrevious>Back</button>
-        <button mat-raised-button color="primary" matStepperNext [disabled]="!stepTwo.form.valid">Continue to Step 3</button>
+        <button mat-raised-button color="primary" matStepperNext [disabled]="!step2.form.valid">Continue to Step 3</button>
       </div>
 
     </mat-step>
 
-    <mat-step [stepControl]="stepThree.form" errorMessage="Course lessons in error">
+    <mat-step [stepControl]="step3.form" errorMessage="Course lessons in error">
 
       <ng-template matStepLabel>course lessons</ng-template>
 
-      <create-course-step-three #stepThree></create-course-step-three>
+      <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" matStepperNext [disabled]="!stepThree.form.valid"
-        (click)="submit(step1.form.value, stepTwo.form.value, stepThree.form.value)">
+        <button mat-raised-button color="primary" matStepperNext [disabled]="!step3.form.valid"
+        (click)="submit(step1.form.value, step2.form.value, step3.form.value)">
           Create Course
         </button>
       </div>

src/app/create-course/create-course-step-three/create-course-step-three.component.html renamed to src/app/create-course/create-course-step-3/create-course-step-3.component.html

@@ -9,8 +9,6 @@ export class OnlyOneErrorPipe implements PipeTransform {
 
   transform(allErrors: any, errorsPriority: string[]): any {
 
-    console.log("allErrors", allErrors);
-
     if (!allErrors) {
       return null;
     }
@@ -24,8 +22,6 @@ export class OnlyOneErrorPipe implements PipeTransform {
       }
     }
 
-    console.log("onlyOneError", onlyOneError);
-
     return onlyOneError;
 
   }

src/app/create-course/create-course-step-three/create-course-step-three.component.scss renamed to src/app/create-course/create-course-step-3/create-course-step-3.component.scss

@@ -10,8 +10,6 @@ export function createPasswordStrengthValidator(): ValidatorFn {
       return null;
     }
 
-    console.log("Checking password strength: " + value);
-
     const hasUpperCase = /[A-Z]+/.test(value);
 
     const hasLowerCase = /[a-z]+/.test(value);
@@ -20,8 +18,6 @@ export function createPasswordStrengthValidator(): ValidatorFn {
 
     const passwordValid = hasLowerCase && hasUpperCase && hasNumeric;
 
-    console.log("passwordValid: ", passwordValid);
-
     return !passwordValid ? {passwordStrength: true} : null;
   };