feat(demo): add form sample to the angular demo

packages/demos/angular/src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'basic-inputs', loadChildren: 'app/basic-inputs-page/basic-inputs-page.module#BasicInputsPageModule' },
+  { path: 'form-sample', loadChildren: 'app/form-sample-page/form-sample-page.module#FormSamplePageModule' },
   { path: 'group-inputs', loadChildren: 'app/group-inputs-page/group-inputs-page.module#GroupInputsPageModule' },
   { path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },
   { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },

packages/demos/angular/src/app/form-sample-page/form-sample-page-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+
+const routes: Routes = [
+  { path: '', component: FormSamplePageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FormSamplePageRoutingModule { }

packages/demos/angular/src/app/form-sample-page/form-sample-page.component.html

@@ -0,0 +1,90 @@
+<ion-app>
+  <form #myForm="ngForm">
+    <ion-page class="show-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Sample Form</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <ion-list>
+          <ion-item>
+            <ion-label floating>First Name</ion-label>
+            <ion-input name="firstName" #viewFirstName="ngModel" [(ngModel)]="firstName" required minlength="2"></ion-input>
+          </ion-item>
+          <ion-text *ngIf="viewFirstName.invalid && (viewFirstName.dirty || viewFirstName.touched)" color="danger">
+            <small *ngIf="viewFirstName.errors['required']">First Name is required</small>
+            <small *ngIf="viewFirstName.errors['minlength']">First Name must be at least 2 characters long</small>
+          </ion-text>
+          <ion-item>
+            <ion-label floating>Last Name</ion-label>
+            <ion-input name="lastName" #viewLastName="ngModel" [(ngModel)]="lastName" required minlength="4"></ion-input>
+          </ion-item>
+          <ion-text *ngIf="viewLastName.invalid && (viewLastName.dirty || viewLastName.touched)" color="danger">
+            <small *ngIf="viewLastName.errors['required']">Last Name is required</small>
+            <small *ngIf="viewLastName.errors['minlength']">Last Name must be at least 4 characters long</small>
+          </ion-text>
+          <ion-item>
+            <ion-label>Desired Job Title</ion-label>
+            <ion-select name="jobTitle" [(ngModel)]="jobTitle" #viewJobTitle="ngModel" required>
+              <ion-select-option value="manager">Cat Herder</ion-select-option>
+              <ion-select-option value="captain">Nerf Herder (Scruffy)</ion-select-option>
+              <ion-select-option value="engineer">Cat</ion-select-option>
+              <ion-select-option value="tester">Trier of Things</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-text *ngIf="viewJobTitle.invalid && (viewJobTitle.dirty || viewJobTitle.touched)" color="danger">
+            <small *ngIf="viewJobTitle.errors['required']">Job Title is required</small>
+          </ion-text>
+          <ion-divider>
+            <ion-label>I Would Like To:</ion-label>
+          </ion-divider>
+          <ion-item>
+            <ion-label>Drink the Beers</ion-label>
+            <ion-toggle name="drinkBeers" color="dark" [(ngModel)]="drinkBeers"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Drink the Teas</ion-label>
+            <ion-toggle name="drinkTeas" color="secondary" [(ngModel)]="drinkTeas"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Make the Coffees</ion-label>
+            <ion-toggle name="makeCoffee" color="primary" [(ngModel)]="makeCoffee"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Feed the Engineers</ion-label>
+            <ion-toggle name="feedEngineers" color="danger" [(ngModel)]="feedEngineers"></ion-toggle>
+          </ion-item>
+            <ion-item>
+            <ion-label floating>Short Self Description</ion-label>
+            <ion-textarea name="selfDescription" #viewSelfDescription="ngModel" [(ngModel)]="selfDescription" required minlength="25"></ion-textarea>
+          </ion-item>
+          <ion-text *ngIf="viewSelfDescription.invalid && (viewSelfDescription.dirty || viewSelfDescription.touched)" color="danger">
+            <small *ngIf="viewSelfDescription.errors['required']">Self Description is required</small>
+            <small *ngIf="viewSelfDescription.errors['minlength']">Please tell us more</small>
+          </ion-text>
+          <ion-item>
+            <ion-label floating>Desired Salary</ion-label>
+            <ion-input name="desiredSalary" #viewSalary="ngModel" type="number" required [(ngModel)]="desiredSalary"></ion-input>
+          </ion-item>
+          <ion-text *ngIf="viewSalary.invalid && (viewSalary.dirty || viewSalary.touched)" color="danger">
+            <small *ngIf="viewSalary.errors['required']">Desired Salary is required</small>
+          </ion-text>
+          <ion-divider>
+            <ion-label>My Level of Happy</ion-label>
+          </ion-divider>
+          <ion-item>
+            <ion-range name="levelOfHappy" [(ngModel)]="levelOfHappy">
+              <ion-icon name="sad" slot="start"></ion-icon>
+              <ion-icon name="happy" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+      <ion-footer>
+        <ion-button expand="block" [disabled]="myForm.invalid" (click)="save()">
+          <ion-icon name="save" slot="start"></ion-icon>Looks Good to Me</ion-button>
+      </ion-footer>
+    </ion-page>
+  </form>
+</ion-app>

packages/demos/angular/src/app/form-sample-page/form-sample-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+
+describe('FormSamplePageComponent', () => {
+  let component: FormSamplePageComponent;
+  let fixture: ComponentFixture<FormSamplePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormSamplePageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormSamplePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/demos/angular/src/app/form-sample-page/form-sample-page.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { HomePageComponent } from '../home-page/home-page.component';
+import { HomePage } from '../../../e2e/home.po';
+
+@Component({
+  selector: 'app-form-sample-page',
+  templateUrl: './form-sample-page.component.html',
+  styleUrls: ['./form-sample-page.component.scss']
+})
+export class FormSamplePageComponent implements OnInit {
+  firstName: string;
+  lastName: string;
+  jobTitle: string;
+
+  drinkBeers: boolean;
+  drinkTeas: boolean;
+  makeCoffee: boolean;
+  feedEngineers: boolean;
+
+  selfDescription: string;
+  desiredSalary: number;
+  levelOfHappy: number;
+
+  constructor(private router: Router) { }
+
+  ngOnInit() { }
+
+  save() {
+    const data = {
+      firstName: this.firstName,
+      lastName: this.lastName,
+      title: this.jobTitle,
+      beer: this.drinkBeers,
+      tea: this.drinkTeas,
+      coffee: this.makeCoffee,
+      feed: this.feedEngineers,
+      description: this.selfDescription,
+      salary: this.desiredSalary,
+      happy: this.levelOfHappy
+    };
+    console.log('I would submit: ', data);
+    this.router.navigate(['home']);
+  }
+}

packages/demos/angular/src/app/form-sample-page/form-sample-page.module.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+import { FormSamplePageRoutingModule } from './form-sample-page-routing.module';
+
+@NgModule({
+  imports: [
+    FormSamplePageRoutingModule,
+    CommonModule,
+    FormsModule,
+    IonicAngularModule
+  ],
+  declarations: [FormSamplePageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FormSamplePageModule {}

packages/demos/angular/src/app/home-page/home-page.component.html

@@ -10,6 +10,9 @@
     <li>
       <a href='group-inputs'>Group Inputs Test Page</a>
     </li>
+    <li>
+      <a href='form-sample'>Form Sample Test Page</a>
+    </li>
     <li>
       <a href='alert'>Alert Page</a>
     </li>