feat(forms): updating the reactive forms sample (#3466)

Author: Marina-L-Stoyanova

src/app/how-to/reactive-forms/reactive-forms.component.html

@@ -76,10 +76,10 @@ <h4>Book your movie ticket</h4>
                 <igx-date-range-picker name="range" formControlName="range">
                     <label igxLabel>Pick suitable date range - for avaliable movies</label>
                 </igx-date-range-picker>
-                 <igx-slider name="slider" formControlName="slider" id="slider" type="range">
+                 <igx-slider name="slider" formControlName="slider" id="slider" type="range" (valueChange)="valueChangeHandler()">
                 </igx-slider>
                 <article class="calendar-wrapper">
-                    <igx-calendar selection="multi" name="calendar" formControlName="calendar"></igx-calendar>
+                    <igx-calendar selection="single" name="calendar" formControlName="calendar"></igx-calendar>
                 </article>
                  <igx-card>
                     <igx-month-picker #monthPicker name="month" formControlName="month"></igx-month-picker>

src/app/how-to/reactive-forms/reactive-forms.component.scss

@@ -5,6 +5,7 @@
 
 .container > * {
     margin-top: 32px;
+    max-width: 450px;
 }
 
 .input-group-form {

src/app/how-to/reactive-forms/reactive-forms.component.ts

@@ -80,6 +80,17 @@ export class ReactiveFormsSampleComponent {
         return this.user.get('fullName');
     }
 
+public valueChangeHandler() {
+        var sliderValue = this.user.get('slider');
+        this.user.controls.range.setValue({
+            start: new Date(new Date().setDate(new Date().getDate() + sliderValue.value.lower)),
+            end: new Date(new Date().setDate(new Date().getDate() + sliderValue.value.upper))
+        });
+
+        var pickerDate = this.user.controls.range.value.start;
+        this.user.controls.calendar.setValue(pickerDate);
+        this.user.controls.month.setValue(pickerDate);
+}
     public onSubmit() {
         console.log(this.user);
     }