Angular Forms In Depth

angular-university · Dec 14, 2020 · 81a15b1 · 81a15b1
1 parent 41d8a95
commit 81a15b1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/app/create-course/create-course-step-2/create-course-step-2.component.html b/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">

diff --git a/src/app/create-course/create-course-step-2/create-course-step-2.component.ts b/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) {