Angular Forms Course

Author: jhades

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

@@ -34,19 +34,6 @@
 
   </mat-form-field>
 
-  <mat-radio-group formControlName="courseType">
-    <mat-radio-button value="free">Free</mat-radio-button>
-    <mat-radio-button value="premium">Premium</mat-radio-button>
-  </mat-radio-group>
-
-  <mat-form-field>
-
-    <input matInput
-           placeholder="Price"
-           formControlName="price">
-
-  </mat-form-field>
-
   <mat-form-field>
 
     <mat-select placeholder="Select category" formControlName="category">
@@ -79,23 +66,6 @@
     Downloads allowed?
   </mat-checkbox>
 
-  <mat-form-field>
-
-    <mat-label>Promotional period</mat-label>
-
-    <mat-date-range-input [rangePicker]="promoPicker">
-      <input matStartDate placeholder="Start date" formControlName="promoPeriodStartAt">
-      <input matEndDate placeholder="End date" formControlName="promoPeriodEndAt">
-    </mat-date-range-input>
-
-    <mat-datepicker-toggle matSuffix [for]="promoPicker"></mat-datepicker-toggle>
-
-    <mat-date-range-picker #promoPicker></mat-date-range-picker>
-
-    <mat-error *ngIf="form.errors?.promoPeriod && form.dirty">The start date must be before the end date.</mat-error>
-
-  </mat-form-field>
-
   <mat-form-field appearance="outline">
 
         <textarea matInput placeholder="Description"

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

@@ -22,16 +22,10 @@ export class CreateCourseStepOneComponent implements OnInit {
       title: ["", [Validators.required, Validators.minLength(3), Validators.maxLength(60)]],
       adminPassword: ["", [Validators.required, Validators.minLength(8), createPasswordStrengthValidator()]],
       supportEmail: ["", [Validators.required, Validators.email]],
-      price: [null, [Validators.required, Validators.pattern("[0-9]+"), Validators.min(1), Validators.max(9999)]],
       category: ["BEGINNER", Validators.required],
-      courseType: ["free", Validators.required],
       downloadsAllowed: [false, Validators.requiredTrue],
-      promoPeriodStartAt: [null],
-      promoPeriodEndAt: [null],
       releasedAt: [new Date(), Validators.required],
       longDescription: ["",[Validators.required, Validators.minLength(3)]]
-    }, {
-      validators: createPromoRangeValidator()
     });
   }
 

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

@@ -0,0 +1,40 @@
+<div [formGroup]="form">
+
+
+  <mat-radio-group formControlName="courseType">
+    <mat-radio-button value="free">Free</mat-radio-button>
+    <mat-radio-button value="premium">Premium</mat-radio-button>
+  </mat-radio-group>
+
+  <mat-form-field>
+
+    <input matInput
+           placeholder="Price"
+           formControlName="price">
+
+  </mat-form-field>
+
+  <mat-form-field>
+
+    <mat-label>Promotional period</mat-label>
+
+    <mat-date-range-input [rangePicker]="promoPicker">
+      <input matStartDate placeholder="Start date" formControlName="promoPeriodStartAt">
+      <input matEndDate placeholder="End date" formControlName="promoPeriodEndAt">
+    </mat-date-range-input>
+
+    <mat-datepicker-toggle matSuffix [for]="promoPicker"></mat-datepicker-toggle>
+
+    <mat-date-range-picker #promoPicker></mat-date-range-picker>
+
+    <mat-error *ngIf="form.errors?.promoPeriod && form.dirty">The start date must be before the end date.</mat-error>
+
+  </mat-form-field>
+
+  <div class="form-val">
+
+    {{form.errors | json}}
+
+  </div>
+
+</div>

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

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {createPromoRangeValidator} from '../../validators/date-range.validator';
 
 
 
@@ -13,7 +14,14 @@ export class CreateCourseStepTwoComponent {
   form: FormGroup;
 
   constructor(private fb: FormBuilder) {
-
+    this.form = fb.group({
+      price: [null, [Validators.required, Validators.pattern("[0-9]+"), Validators.min(1), Validators.max(9999)]],
+      courseType: ["free", Validators.required],
+      promoPeriodStartAt: [null],
+      promoPeriodEndAt: [null]
+    }, {
+      validators: createPromoRangeValidator()
+    });
 
 
   }

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

@@ -18,10 +18,12 @@ <h2 class="title">Create New Course</h2>
 
     </mat-step>
 
-    <mat-step>
+    <mat-step [stepControl]="stepTwo.form">
 
       <ng-template matStepLabel>course pricing details</ng-template>
 
+      <create-course-step-two #stepTwo></create-course-step-two>
+
       <div>
         <button mat-raised-button  matStepperPrevious>Back</button>
         <button mat-raised-button color="primary" matStepperNext>Continue to Step 3</button>