Merge pull request #6877 from IgniteUI/mvenkov/react-form-sample

chore(reactive-form): add dev sample for reactive form

Author: Lipata

src/app/app.component.ts

@@ -332,6 +332,11 @@ export class AppComponent implements OnInit {
             icon: 'radio_button_checked',
             name: 'Radio Group'
         },
+        {
+            link: '/reactive',
+            icon: 'web',
+            name: 'Reactive Form'
+        },
         {
             link: '/select',
             icon: 'arrow_drop_down_circle',

src/app/app.module.ts

@@ -115,6 +115,7 @@ import { GridExternalFilteringComponent } from './grid-external-filtering/grid-e
 import { AboutComponent } from './grid-state/about.component';
 import { GridSaveStateComponent } from './grid-state/grid-state.component';
 import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
+import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
 
 const components = [
     AppComponent,
@@ -220,7 +221,8 @@ const components = [
     GridFilteringComponent,
     GridExternalFilteringComponent,
     GridSaveStateComponent,
-    AboutComponent
+    AboutComponent,
+    ReactiveFormSampleComponent
 ];
 
 @NgModule({

src/app/reactive-from/reactive-form-sample.component.html

@@ -0,0 +1,51 @@
+<div class="sample-wrapper">
+    <section class="sample-content">
+        <article class="sample-column">
+            <form class="input-group-form" [formGroup]="user" (ngSubmit)="onSubmit()">
+                <h4 class="sample-title">Book your movie ticket</h4>
+                <div class="container">
+                    <igx-select #select name="movies" formControlName="movie">
+                        <igx-select-item-group *ngFor="let genre of genres" [label]="genre.type">
+                            <igx-select-item *ngFor="let movie of genre.movies" [value]="movie">
+                                {{ movie }}
+                            </igx-select-item>
+                        </igx-select-item-group>
+                        <label igxLabel for="movies">Movie</label>
+                        <ng-template igxSelectToggleIcon><igx-icon fontSet="material">local_movies</igx-icon></ng-template>
+                    </igx-select>
+                    <igx-input-group>
+                        <input igxInput name="fullName" type="text" formControlName="fullName" />
+                        <label igxLabel for="fullName">Full Name</label>
+                        <igx-suffix>
+                            <igx-icon>person</igx-icon>
+                        </igx-suffix>
+                    </igx-input-group>
+                    <igx-input-group>
+                        <igx-prefix>+359</igx-prefix>
+                        <label igxLabel for="phone">Phone</label>
+                        <input igxInput name="phone" type="text" formControlName="phone" />
+                        <igx-suffix>
+                            <igx-icon>phone</igx-icon>
+                        </igx-suffix>
+                        <igx-hint position="start">Ex.: +359 888 123 456</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-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"
+                        searchPlaceholder="Search...">
+                    </igx-combo>
+                    <igx-date-picker name="date" formControlName="date" [mode]="'dropdown'"></igx-date-picker>
+                    <igx-time-picker name="dateTime" formControlName="dateTime"></igx-time-picker>
+                    <button igxButton="raised" igxRipple type="submit" [disabled]="!user.valid">Book</button>
+                </div>
+            </form>
+        </article>
+    </section>
+</div>

src/app/reactive-from/reactive-form-sample.component.scss

@@ -0,0 +1,13 @@
+.container > * {
+    margin-top: 32px;
+}
+
+.input-group-form {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+    padding: 24px;
+    margin-bottom: 48px;
+}
+
+.sample-title {
+    margin-top: 0;
+}

src/app/reactive-from/reactive-form-sample.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'app-reactive-form',
+    styleUrls: ['reactive-form-sample.component.scss'],
+    templateUrl: 'reactive-form-sample.component.html'
+})
+export class ReactiveFormSampleComponent {
+    public genres = [];
+    public user: FormGroup;
+
+    constructor(fb: FormBuilder) {
+        this.user = fb.group({
+            // date: ['', Validators.required],
+            date: ['', { validators: Validators.required, updateOn: 'blur' }],
+            dateTime: ['', Validators.required],
+            email: ['', Validators.required],
+            fullName: new FormControl('', Validators.required),
+            genres: [''],
+            movie: ['', Validators.required],
+            phone: ['']
+        });
+
+        this.genres = [
+            { type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
+            { type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
+            // tslint:disable-next-line:object-literal-sort-keys
+            {
+                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'] },
+            { type: 'Mystery', movies: ['The Prestige', 'Memento', 'Cloud Atlas'] },
+            { type: 'Musical', movies: ['All That Jazz'] },
+            { type: 'Romance', movies: ['Love Actually', 'In The Mood for Love'] },
+            { type: 'Sci-Fi', movies: ['The Fifth Element'] },
+            { type: 'Thriller', movies: ['The Usual Suspects'] },
+            { type: 'Western', movies: ['Django Unchained'] }];
+
+    }
+
+    public onSubmit() {
+        console.log(this.user);
+    }
+}

src/app/routing.ts

@@ -92,6 +92,7 @@ import { GridExternalFilteringComponent } from './grid-external-filtering/grid-e
 import { GridSaveStateComponent } from './grid-state/grid-state.component';
 import { AboutComponent } from './grid-state/about.component';
 import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
+import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
 
 const appRoutes = [
     {
@@ -235,6 +236,10 @@ const appRoutes = [
         path: 'radio',
         component: RadioSampleComponent
     },
+    {
+        path: 'reactive',
+        component: ReactiveFormSampleComponent
+    },
     {
         path: 'ripple',
         component: RippleSampleComponent