Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit e41da11

Browse files
thelgevoldnaomiblack
thelgevold
authored and
naomiblack
committed
docs(forms): upgrading forms guide to new api
This PR upgrades the existing forms to the new API, while leaving a copy for existing users. The current forms will be the default until RC4, at which point we will switch the default to the new API but still retain a link to the old forms API. After RC5 the old API docs will be completely removed.
1 parent 7d5614e commit e41da11

31 files changed

+2252
-106
lines changed

‎public/docs/_examples/forms-deprecated/e2e-spec.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/// <reference path='../_protractor/e2e.d.ts' />
2+
'use strict';
3+
describeIf(browser.appIsTs || browser.appIsJs, 'Forms (Deprecated) Tests', function () {
4+
5+
beforeEach(function () {
6+
browser.get('');
7+
});
8+
9+
it('should display correct title', function () {
10+
expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
11+
});
12+
13+
14+
it('should not display message before submit', function () {
15+
let ele = element(by.css('h2'));
16+
expect(ele.isDisplayed()).toBe(false);
17+
});
18+
19+
it('should hide form after submit', function () {
20+
let ele = element.all(by.css('h1')).get(0);
21+
expect(ele.isDisplayed()).toBe(true);
22+
let b = element.all(by.css('button[type=submit]')).get(0);
23+
b.click().then(function() {
24+
expect(ele.isDisplayed()).toBe(false);
25+
});
26+
});
27+
28+
it('should display message after submit', function () {
29+
let b = element.all(by.css('button[type=submit]')).get(0);
30+
b.click().then(function() {
31+
expect(element(by.css('h2')).getText()).toContain('You submitted the following');
32+
});
33+
});
34+
35+
it('should hide form after submit', function () {
36+
let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
37+
expect(alterEgoEle.isDisplayed()).toBe(true);
38+
let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
39+
submitButtonEle.click().then(function() {
40+
expect(alterEgoEle.isDisplayed()).toBe(false);
41+
});
42+
});
43+
44+
it('should reflect submitted data after submit', function () {
45+
let test = 'testing 1 2 3';
46+
let newValue: string;
47+
let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
48+
alterEgoEle.getAttribute('value').then(function(value) {
49+
// alterEgoEle.sendKeys(test);
50+
sendKeys(alterEgoEle, test);
51+
newValue = value + test;
52+
expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
53+
}).then(function() {
54+
let b = element.all(by.css('button[type=submit]')).get(0);
55+
return b.click();
56+
}).then(function() {
57+
let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
58+
expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
59+
let divEle = element(by.cssContainingText('div', newValue));
60+
expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
61+
});
62+
});
63+
});
64+

‎public/docs/_examples/forms-deprecated/js/app/app.component.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// #docregion
2+
(function(app) {
3+
app.AppComponent = ng.core
4+
.Component({
5+
selector: 'my-app',
6+
template: '<hero-form></hero-form>',
7+
directives: [app.HeroFormComponent]
8+
})
9+
.Class({
10+
constructor: function() {}
11+
});
12+
})(window.app || (window.app = {}));

‎public/docs/_examples/forms-deprecated/js/app/hero-form.component.html

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion final -->
3+
<div class="container">
4+
<!-- #docregion edit-div -->
5+
<div [hidden]="submitted">
6+
<h1>Hero Form</h1>
7+
<!-- #docregion ngSubmit -->
8+
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
9+
<!-- #enddocregion ngSubmit -->
10+
<!-- #enddocregion edit-div -->
11+
<div class="form-group">
12+
<label for="name">Name</label>
13+
<!-- #docregion name-with-error-msg -->
14+
<input type="text" class="form-control" required
15+
[(ngModel)]="model.name"
16+
ngControl="name" #name="ngForm" >
17+
<div [hidden]="name.valid" class="alert alert-danger">
18+
Name is required
19+
</div>
20+
<!-- #enddocregion name-with-error-msg -->
21+
</div>
22+
23+
<div class="form-group">
24+
<label for="alterEgo">Alter Ego</label>
25+
<input type="text" class="form-control"
26+
[(ngModel)]="model.alterEgo"
27+
ngControl="alterEgo" >
28+
</div>
29+
30+
<div class="form-group">
31+
<label for="power">Hero Power</label>
32+
<select class="form-control" required
33+
[(ngModel)]="model.power"
34+
ngControl="power" #power="ngForm" >
35+
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
36+
</select>
37+
<div [hidden]="power.valid" class="alert alert-danger">
38+
Power is required
39+
</div>
40+
</div>
41+
42+
<!-- #docregion submit-button -->
43+
<button type="submit" class="btn btn-default"
44+
[disabled]="!heroForm.form.valid">Submit</button>
45+
<!-- #enddocregion submit-button -->
46+
</form>
47+
</div>
48+
49+
<!-- #docregion submitted -->
50+
<div [hidden]="!submitted">
51+
<h2>You submitted the following:</h2>
52+
<div class="row">
53+
<div class="col-xs-3">Name</div>
54+
<div class="col-xs-9 pull-left">{{ model.name }}</div>
55+
</div>
56+
<div class="row">
57+
<div class="col-xs-3">Alter Ego</div>
58+
<div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
59+
</div>
60+
<div class="row">
61+
<div class="col-xs-3">Power</div>
62+
<div class="col-xs-9 pull-left">{{ model.power }}</div>
63+
</div>
64+
<br>
65+
<button class="btn btn-default" (click)="submitted=false">Edit</button>
66+
</div>
67+
<!-- #enddocregion submitted -->
68+
</div>
69+
<!-- #enddocregion final -->
70+
71+
<!-- ==================================================== -->
72+
<div>
73+
<form>
74+
<!-- #docregion edit-div -->
75+
76+
<!-- ... all of the form ... -->
77+
78+
</form>
79+
</div>
80+
<!-- #enddocregion edit-div -->
81+
82+
<!-- ==================================================== -->
83+
<hr>
84+
<style>
85+
.no-style .ng-valid {
86+
border-left: 1px solid #CCC
87+
}
88+
89+
.no-style .ng-invalid {
90+
border-left: 1px solid #CCC
91+
}
92+
</style>
93+
<div class="no-style" style="margin-left: 4px">
94+
<!-- #docregion start -->
95+
<div class="container">
96+
<h1>Hero Form</h1>
97+
<form>
98+
<div class="form-group">
99+
<label for="name">Name</label>
100+
<input type="text" class="form-control" required>
101+
</div>
102+
103+
<div class="form-group">
104+
<label for="alterEgo">Alter Ego</label>
105+
<input type="text" class="form-control">
106+
</div>
107+
108+
<!-- #enddocregion start -->
109+
<!-- #docregion powers -->
110+
<div class="form-group">
111+
<label for="power">Hero Power</label>
112+
<select class="form-control" required>
113+
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
114+
</select>
115+
</div>
116+
117+
<!-- #enddocregion powers -->
118+
<!-- #docregion start -->
119+
<button type="submit" class="btn btn-default">Submit</button>
120+
</form>
121+
</div>
122+
<!-- #enddocregion start -->
123+
<!-- #enddocregion phase1-->
124+
125+
<!-- ==================================================== -->
126+
<hr>
127+
<!-- #docregion phase2-->
128+
<div class="container">
129+
<h1>Hero Form</h1>
130+
<form>
131+
<!-- #docregion ngModel-2-->
132+
{{diagnostic()}}
133+
<div class="form-group">
134+
<label for="name">Name</label>
135+
<input type="text" class="form-control" required
136+
[(ngModel)]="model.name" >
137+
</div>
138+
139+
<div class="form-group">
140+
<label for="alterEgo">Alter Ego</label>
141+
<input type="text" class="form-control"
142+
[(ngModel)]="model.alterEgo">
143+
</div>
144+
145+
<div class="form-group">
146+
<label for="power">Hero Power</label>
147+
<select class="form-control" required
148+
[(ngModel)]="model.power" >
149+
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
150+
</select>
151+
</div>
152+
153+
<!-- #enddocregion ngModel-2-->
154+
<button type="submit" class="btn btn-default">Submit</button>
155+
156+
</form>
157+
</div>
158+
<!-- #enddocregion phase2-->
159+
160+
<!-- EXTRA MATERIAL FOR DOCUMENTATION -->
161+
<hr>
162+
<!-- #docregion ngModel-1-->
163+
<input type="text" class="form-control" required
164+
[(ngModel)]="model.name" >
165+
TODO: remove this: {{model.name}}
166+
<!-- #enddocregion ngModel-1-->
167+
<hr>
168+
<!-- #docregion ngModel-3-->
169+
<input type="text" class="form-control" required
170+
[ngModel]="model.name"
171+
(ngModelChange)="model.name = $event" >
172+
TODO: remove this: {{model.name}}
173+
<!-- #enddocregion ngModel-3-->
174+
<hr>
175+
<form>
176+
<!-- #docregion ngControl-1 -->
177+
<input type="text" class="form-control" required
178+
[(ngModel)]="model.name"
179+
ngControl="name" >
180+
<!-- #enddocregion ngControl-1 -->
181+
<hr>
182+
<!-- #docregion ngControl-2 -->
183+
<input type="text" class="form-control" required
184+
[(ngModel)]="model.name"
185+
ngControl="name" #spy >
186+
<br>TODO: remove this: {{spy.className}}
187+
<!-- #enddocregion ngControl-2 -->
188+
</form>
189+
190+
<div>
191+
<hr>
192+
Name via form.controls = {{showFormControls(heroForm)}}
193+
</div>
194+
195+
</div>

‎public/docs/_examples/forms-deprecated/js/app/hero-form.component.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion first, final
4+
(function(app) {
5+
app.HeroFormComponent = ng.core
6+
.Component({
7+
selector: 'hero-form',
8+
templateUrl: 'app/hero-form.component.html'
9+
})
10+
.Class({
11+
// #docregion submitted
12+
constructor: function() {
13+
// #enddocregion submitted
14+
this.powers = ['Really Smart', 'Super Flexible',
15+
'Super Hot', 'Weather Changer'
16+
];
17+
18+
this.model = new app.Hero(18, 'Dr IQ', this.powers[0],
19+
'Chuck Overstreet');
20+
21+
// #docregion submitted
22+
this.submitted = false;
23+
},
24+
onSubmit: function() {
25+
this.submitted = true;
26+
},
27+
// #enddocregion submitted
28+
29+
// #enddocregion final
30+
// TODO: Remove this when we're done
31+
diagnostic: function() {
32+
return JSON.stringify(this.model);
33+
},
34+
// #enddocregion first
35+
36+
37+
//////// DO NOT SHOW IN DOCS ////////
38+
39+
// Reveal in html:
40+
// AlterEgo via form.controls = {{showFormControls(hf)}}
41+
showFormControls: function(form) {
42+
return form.controls['alterEgo'] &&
43+
// #docregion form-controls
44+
form.controls['name'].value; // Dr. IQ
45+
// #enddocregion form-controls
46+
},
47+
/////////////////////////////
48+
49+
// #docregion first, final
50+
});
51+
// #enddocregion first, final
52+
})(window.app || (window.app = {}));

‎public/docs/_examples/forms-deprecated/js/app/hero.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// #docregion
2+
(function(app) {
3+
app.Hero = Hero;
4+
5+
function Hero(id, name, power, alterEgo) {
6+
this.id = id;
7+
this.name = name;
8+
this.power = power;
9+
this.alterEgo = alterEgo;
10+
}
11+
})(window.app || (window.app = {}));

‎public/docs/_examples/forms-deprecated/js/app/main.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// #docregion
2+
(function(app) {
3+
document.addEventListener('DOMContentLoaded', function() {
4+
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
5+
});
6+
})(window.app || (window.app = {}));

‎public/docs/_examples/forms-deprecated/js/example-config.json

Whitespace-only changes.

‎public/docs/_examples/forms-deprecated/js/forms.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* #docregion */
2+
.ng-valid[required] {
3+
border-left: 5px solid #42A948; /* green */
4+
}
5+
6+
.ng-invalid {
7+
border-left: 5px solid #a94442; /* red */
8+
}
9+
/* #enddocregion */

0 commit comments

Comments
 (0)