refactor(forms): upgrade to @angular/forms

src/components/segment/segment.ts

@@ -1,5 +1,5 @@
 import { Component, ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, Output, Optional, QueryList, Renderer, ViewEncapsulation } from '@angular/core';
-import { NgControl } from '@angular/common';
+import { NgControl } from '@angular/forms';
 
 import { isPresent, isTrueProperty } from '../../util/util';
 
@@ -152,8 +152,8 @@ export class SegmentButton {
  *   </ion-segment>
  *
  *   <!-- Segment in a form -->
- *   <form [ngFormModel]="myForm">
- *     <ion-segment ngControl="mapStyle" danger>
+ *   <form [formGroup]="myForm">
+ *     <ion-segment formControlName="mapStyle" danger>
  *       <ion-segment-button value="standard">
  *         Standard
  *       </ion-segment-button>

src/components/segment/test/basic/index.ts

@@ -1,11 +1,10 @@
-import {Component} from '@angular/core';
-import {FormBuilder, Validators} from '@angular/common';
-import {ionicBootstrap} from '../../../../../src';
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { ionicBootstrap, SegmentButton } from '../../../../../src';
 
 
 @Component({
-  templateUrl: 'main.html',
-  providers: [FormBuilder]
+  templateUrl: 'main.html'
 })
 class E2EPage {
   relationship: string = 'enemies';
@@ -25,15 +24,15 @@ class E2EPage {
     this.isDisabled = !this.isDisabled;
   }
 
-  onSegmentChanged(segmentButton) {
+  onSegmentChanged(segmentButton: SegmentButton) {
     console.log("Segment changed to", segmentButton.value);
   }
 
-  onSegmentSelected(segmentButton) {
+  onSegmentSelected(segmentButton: SegmentButton) {
     console.log("Segment selected", segmentButton.value);
   }
 
-  doSubmit(ev) {
+  doSubmit(ev: UIEvent) {
     console.log('Submitting form', this.myForm.value);
     ev.preventDefault();
   }

src/components/segment/test/basic/main.html

@@ -34,10 +34,10 @@
 
   <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
 
-  <h4>Map mode: NgControl</h4>
+  <h4>Map mode: formControlName</h4>
 
-  <form (submit)="doSubmit($event)" [ngFormModel]="myForm">
-    <ion-segment ngControl="mapStyle" danger>
+  <form (submit)="doSubmit($event)" [formGroup]="myForm">
+    <ion-segment formControlName="mapStyle" danger>
       <ion-segment-button value="active" class="e2eSegmentStandard">
         Active
       </ion-segment-button>

src/components/segment/test/nav/index.ts

@@ -1,6 +1,5 @@
-import {Component} from '@angular/core';
-import {Validators, Control, ControlGroup} from '@angular/common';
-import {ionicBootstrap, NavController} from '../../../../../src';
+import { Component } from '@angular/core';
+import { ionicBootstrap, NavController } from '../../../../../src';
 
 
 @Component({
@@ -36,10 +35,7 @@ class SegmentPage {
     </ion-content>
   `
 })
-class SegmentPage2 {
-  constructor() {
-  }
-}
+class SegmentPage2 {}
 
 
 @Component({

src/components/segment/test/swipe/index.ts

@@ -1,7 +1,5 @@
-import {Component, ViewChild} from '@angular/core';
-import {Validators, Control, ControlGroup} from '@angular/common';
-import {Http} from '@angular/http';
-import {ionicBootstrap, NavController, Slides} from '../../../../../src';
+import { Component, ViewChild } from '@angular/core';
+import { ionicBootstrap, Slides, SegmentButton } from '../../../../../src';
 
 
 @Component({
@@ -30,7 +28,7 @@ class SegmentPage {
 
   }
 
-  onSegmentChanged(segmentButton) {
+  onSegmentChanged(segmentButton: SegmentButton) {
     console.log("Segment changed to", segmentButton.value);
 
     const selectedIndex = this.slides.findIndex((slide) => {
@@ -39,7 +37,7 @@ class SegmentPage {
     this.sliderComponent.slideTo(selectedIndex);
   }
 
-  onSlideChanged(slider) {
+  onSlideChanged(slider: any) {
     console.log('Slide changed', slider);
 
     const currentSlide = this.slides[slider.activeIndex];