javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(forms): upgrade to @angular/forms

Browse Source
This commit is contained in:
Adam Bradley
2016-06-30 21:54:48 -05:00
parent 9b2f4a682e
commit 4d56219a4c
42 changed files with 219 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/toggle/test/basic/e2e.ts
View File

@@ -1,6 +1,6 @@
it('should check apple via switch element click', function() {
element(by.css('[ngControl="appleCtrl"]')).click();
element(by.css('[formControlName="appleCtrl"]')).click();
});

40
src/components/toggle/test/basic/index.ts
View File

@@ -1,13 +1,13 @@
import {Component} from '@angular/core';
import {Control, ControlGroup, NgFormModel} from '@angular/common';
import {ionicBootstrap} from '../../../../../src';
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ionicBootstrap, Toggle } from '../../../../../src';
@Component({
templateUrl: 'main.html'
})
class E2EPage {
fruitsForm: ControlGroup;
fruitsForm: FormGroup;
grapeDisabled: boolean;
grapeChecked: boolean;
kiwiValue: boolean;
@@ -15,11 +15,11 @@ class E2EPage {
formResults: string;
constructor() {
this.fruitsForm = new ControlGroup({
"appleCtrl": new Control(false),
"bananaCtrl": new Control(true),
"cherryCtrl": new Control(false),
"grapeCtrl": new Control(true)
this.fruitsForm = new FormGroup({
"appleCtrl": new FormControl(false),
"bananaCtrl": new FormControl(true),
"cherryCtrl": new FormControl(false),
"grapeCtrl": new FormControl(true)
});
this.grapeChecked = true;
@@ -34,25 +34,25 @@ class E2EPage {
this.grapeDisabled = !this.grapeDisabled;
}
appleChange(ev) {
console.log('appleChange', ev);
appleChange(toggle: Toggle) {
console.log('appleChange', toggle);
}
bananaChange(ev) {
console.log('bananaChange', ev);
bananaChange(toggle: Toggle) {
console.log('bananaChange', toggle);
}
kiwiChange(ev) {
console.log('kiwiChange', ev);
this.kiwiValue = ev.checked;
kiwiChange(toggle: Toggle) {
console.log('kiwiChange', toggle);
this.kiwiValue = toggle.checked;
}
strawberryChange(ev) {
console.log('strawberryChange', ev);
this.strawberryValue = ev.checked;
strawberryChange(toggle: Toggle) {
console.log('strawberryChange', toggle);
this.strawberryValue = toggle.checked;
}
doSubmit(ev) {
doSubmit(ev: UIEvent) {
console.log('Submitting form', this.fruitsForm.value);
this.formResults = JSON.stringify(this.fruitsForm.value);
ev.preventDefault();

20
src/components/toggle/test/basic/main.html
View File

@@ -9,7 +9,7 @@
<ion-content>
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
<form (submit)="doSubmit($event)" [formGroup]="fruitsForm">
<ion-list>
@@ -20,27 +20,27 @@
<ion-item>
<ion-label>Apple</ion-label>
<ion-toggle item-left value="apple"></ion-toggle>
<ion-toggle item-left></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Apple, ngControl</ion-label>
<ion-toggle ngControl="appleCtrl" (ionChange)="appleChange($event)"></ion-toggle>
<ion-label>Apple, formControlName</ion-label>
<ion-toggle formControlName="appleCtrl" (ionChange)="appleChange($event)"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Banana, ngControl</ion-label>
<ion-toggle ngControl="bananaCtrl" (ionChange)="bananaChange($event)"></ion-toggle>
<ion-label>Banana, formControlName</ion-label>
<ion-toggle formControlName="bananaCtrl" (ionChange)="bananaChange($event)"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Cherry, ngControl, disabled</ion-label>
<ion-toggle disabled="true" ngControl="cherryCtrl"></ion-toggle>
<ion-label>Cherry, formControlName, disabled</ion-label>
<ion-toggle disabled="true" formControlName="cherryCtrl"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Grape, ngControl, checked, disabled</ion-label>
<ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
<ion-label>Grape, formControlName, checked, disabled</ion-label>
<ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grapeCtrl"></ion-toggle>
</ion-item>
<ion-item>