feat(forms): updating the reactive forms sample with new components (#3453)

Author: Marina-L-Stoyanova

src/app/app.module.ts

@@ -4,8 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
-    IgxAutocompleteModule, IgxButtonModule, IgxButtonGroupModule, IgxDropDownModule,
-    IgxIconModule, IgxInputGroupModule, IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxTreeModule
+    IgxAutocompleteModule, IgxButtonModule, IgxButtonGroupModule, IgxDateRangePickerModule, IgxDropDownModule,
+    IgxIconModule, IgxInputGroupModule, IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxSliderModule, IgxTreeModule
 } from 'igniteui-angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -39,7 +39,10 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
         FormsModule,
         HttpClientModule,
         HammerModule,
-        NgbModule
+        NgbModule,
+        IgxSliderModule,
+        IgxDateRangePickerModule,
+        IgxDropDownModule
     ],
     providers: []
 })

src/app/data-entries/data-entries.module.ts

@@ -4,10 +4,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
     IgcFormsModule,
-    IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxIconButtonDirective, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
-    IgxDatePickerModule, IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
+    IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxIconButtonDirective, IgxCalendarModule, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
+    IgxDatePickerModule, IgxDateRangePickerModule, IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
     IgxIconModule, IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule,
-    IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule, IgxTreeGridModule, IgxTreeModule
+    IgxSelectModule, IgxSlideComponent, IgxSliderModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule, IgxTreeGridModule, IgxTreeModule
 } from 'igniteui-angular';
 import { AutocompleteBasicComponent, AutocompletePipeStartsWith } from './autocomplete/autocomplete/autocomplete.component';
 import { MovieComponent } from './autocomplete/movie/movie.component';
@@ -195,7 +195,11 @@ import { IconButtonStylingComponent } from './icon-button/icon-button-styling/ic
         IgcFormsModule,
         IgxChipsModule,
         IgxTreeModule,
-        IgxTreeGridModule
+        IgxTreeGridModule,
+        IgxSliderModule,
+        IgxDateRangePickerModule,
+        IgxCalendarModule,
+        IgxCardModule
     ]
 })
 export class DataEntriesModule { }

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

@@ -15,27 +15,32 @@ <h4>Book your movie ticket</h4>
                     </ng-template>
                 </igx-select>
                 <igx-input-group>
-                    <input igxInput name="fullName" type="text" formControlName="fullName" />
+                    <input igxInput name="fullName" type="text" formControlName="fullName" aria-describedby="invalid-name" />
                     <label igxLabel for="fullName">Full Name</label>
                     <igx-suffix>
                         <igx-icon>person</igx-icon>
                     </igx-suffix>
+                    <igx-hint *ngIf="fullName.touched && fullName.errors?.required">Fullname is required</igx-hint>
+                    <igx-hint id="invalid-name" *ngIf="fullName.touched && fullName.errors?.pattern">Please enter a valid name.</igx-hint>
                 </igx-input-group>
                 <igx-input-group>
                     <igx-prefix>+359</igx-prefix>
                     <label igxLabel for="phone">Phone</label>
-                    <input igxInput name="phone" type="tel" formControlName="phone" />
+                    <input igxInput name="phone" type="number" formControlName="phone" />
                     <igx-suffix>
                         <igx-icon>phone</igx-icon>
                     </igx-suffix>
                     <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+                    <igx-hint *ngIf="phone.touched && phone.invalid">Phone number is required</igx-hint>
                 </igx-input-group>
                 <igx-input-group>
                     <label igxLabel for="email">Email address</label>
                     <input igxInput name="email" type="email" formControlName="email" />
                     <igx-suffix>
                         <igx-icon>email</igx-icon>
                     </igx-suffix>
+                    <igx-hint *ngIf="email.touched && email.invalid">Email is required</igx-hint>
+                    <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
                 </igx-input-group>
                 <igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres" [valueKey]="'type'"
                     [displayKey]="'type'" type="line" formControlName="genres" placeholder="Select your favorite genres"
@@ -51,6 +56,34 @@ <h4>Book your movie ticket</h4>
                         <igx-icon>access_time</igx-icon>
                     </igx-picker-toggle>
                 </igx-time-picker>
+                <igc-rating  size="large" name="rating" class="user-input" formControlName="rating">
+                    <label igxLabel>Rate the movie</label>
+                </igc-rating>
+                <igx-checkbox labelPosition="after" class="user-input" name="checkbox" formControlName="checkbox">
+                    Agree to the terms of use.
+                </igx-checkbox>
+                <igx-radio-group value="1" class="user-input" formControlName="radio">
+                    <igx-radio value="2d" class="radio">
+                        2D Movie
+                    </igx-radio>
+                    <igx-radio value="3d" class="radio">
+                        3D Movie
+                    </igx-radio>
+                </igx-radio-group>
+                <igx-switch name="switch" formControlName="switch">
+                    Subtitles for the Deaf or Hard-of-Hearing (SDH)
+                </igx-switch>
+                <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>
+                <article class="calendar-wrapper">
+                    <igx-calendar selection="multi" name="calendar" formControlName="calendar"></igx-calendar>
+                </article>
+                 <igx-card>
+                    <igx-month-picker #monthPicker name="month" formControlName="month"></igx-month-picker>
+                </igx-card>
                 <button igxButton="contained" igxRipple type="submit" [disabled]="!user.valid">Book</button>
             </div>
         </form>

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

@@ -16,3 +16,8 @@
 h4 {
     margin-top: 0;
 }
+
+igx-card, article {
+    max-width: 400px;
+    margin: 20px;
+}

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

@@ -1,38 +1,62 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { DateRange, IRangeSliderValue } from 'igniteui-angular';
 
+
+export interface User{
+     date: FormControl<string |Date | null>,
+     time: FormControl<string| Date| null>,
+     email: FormControl<string | null>,
+     fullName: FormControl<string | null>,
+     movie: FormControl<string | null>,
+     phone: FormControl<number | null>,
+     rating: FormControl<number | null>,
+     checkbox: FormControl<boolean | null>,
+     radio: FormControl,
+     switch: FormControl<boolean | null>,
+     range: FormControl<DateRange|null>,
+    slider: FormControl<IRangeSliderValue|null>
+    calendar: FormControl<string |Date|null>
+    month: FormControl<string| Date |null>
+    genres: FormControl<string[] | null>
+}
 @Component({
     selector: 'app-reactive-form',
     styleUrls: ['./reactive-forms.component.scss'],
     templateUrl: './reactive-forms.component.html'
 })
 export class ReactiveFormsSampleComponent {
     public genres = [];
-    public user: FormGroup;
     public minTime = '06:15:30';
     public maxTime = '09:15:30';
+    public minValue = '0';
+    public maxValue = '100';
     public minDate = new Date();
     public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14));
+    public user: FormGroup<User>;
 
-
-    constructor(fb: FormBuilder) {
-        this.user = fb.group({
-            date: ['', Validators.required],
-            time: ['', Validators.required],
-            email: ['', Validators.required],
-            fullName: ['', Validators.required],
-            genres: [''],
-            movie: ['', Validators.required],
-            phone: ['']
+    constructor() {
+        this.user =  new FormGroup<User>({
+            date: new FormControl('', Validators.required),
+            time: new FormControl('', Validators.required),
+            email: new FormControl('', [Validators.required, Validators.email]),
+            fullName: new FormControl('', [Validators.required, Validators.pattern(/^[\p{L}\p{M}'\- ]+$/u)]),
+            movie: new FormControl('', Validators.required),
+            phone: new FormControl(null,Validators.required),
+            rating: new FormControl(2, Validators.required),
+            checkbox: new FormControl(true,Validators.required),
+            radio: new FormControl(''),
+            switch: new FormControl(false),
+            range: new FormControl({ start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5))}),
+            slider: new FormControl({lower: 5, upper: 30}),
+            calendar: new FormControl(null),
+            month: new FormControl(null),
+            genres: new FormControl(['Action','Adventure','Comedy'])
         });
-
         this.genres = [
             { type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
             { type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
-            {
-                type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri',
-                    'Untouchable', '3 idiots']
-            },
+            {type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri','Untouchable', '3 idiots']},
             { type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] },
             { type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] },
             { type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] },
@@ -43,6 +67,17 @@ export class ReactiveFormsSampleComponent {
             { type: 'Thriller', movies: ['The Usual Suspects'] },
             { type: 'Western', movies: ['Django Unchained'] }
         ];
+
+    }
+
+    public get email() {
+        return this.user.get('email');
+    }
+    public get phone() {
+        return this.user.get('phone');
+    }
+    public get fullName() {
+        return this.user.get('fullName');
     }
 
     public onSubmit() {