Angular Forms In Depth

Author: Your Name

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

@@ -16,6 +16,24 @@
 
     </mat-form-field>
 
+    <mat-form-field>
+
+        <mat-label>Promotional period</mat-label>
+
+        <mat-date-range-input [rangePicker]="promoPicker">
+
+            <input matStartDate placeholder="Start date" formControlName="promoStartAt">
+
+            <input matEndDate placeholder="End date" formControlName="promoEndAt">
+
+        </mat-date-range-input>
+
+        <mat-datepicker-toggle matSuffix [for]="promoPicker"></mat-datepicker-toggle>
+
+        <mat-date-range-picker #promoPicker></mat-date-range-picker>
+
+    </mat-form-field>
+
 </div>
 
 <div class="form-val">

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

@@ -16,7 +16,9 @@ export class CreateCourseStep2Component implements OnInit {
             Validators.min(1),
             Validators.max(9999),
             Validators.pattern("[0-9]+")
-        ]]
+        ]],
+        promoStartAt: [null],
+        promoEndAt: [null]
     });
 
     constructor(private fb: FormBuilder) {