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

Commit e287a06

Browse files
kapunahelewongkapunahelewong
committed
docs(reactive-forms): add reactive forms guide
1 parent d89a5ab commit e287a06

22 files changed

+872
-2
lines changed

‎public/docs/_examples/reactive-forms/ts/app/app.component.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion app-component-html -->
3+
<div class="container">
4+
<reactive-form></reactive-form>
5+
</div>
6+
<!-- #enddocregion app-component-html -->

‎public/docs/_examples/reactive-forms/ts/app/app.component.spec.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { AppComponent } from './app.component';
2+
3+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
4+
import { By } from '@angular/platform-browser';
5+
import { DebugElement } from '@angular/core';
6+
7+
//////// SPECS /////////////
8+
describe('AppComponent', function () {
9+
let de: DebugElement;
10+
let comp: AppComponent;
11+
let fixture: ComponentFixture<AppComponent>;
12+
13+
beforeEach(async(() => {
14+
TestBed.configureTestingModule({
15+
declarations: [ AppComponent ]
16+
})
17+
.compileComponents();
18+
}));
19+
20+
beforeEach(() => {
21+
fixture = TestBed.createComponent(AppComponent);
22+
comp = fixture.componentInstance;
23+
de = fixture.debugElement.query(By.css('h1'));
24+
});
25+
26+
it('should create component', () => expect(comp).toBeDefined() );
27+
28+
it('should have expected <h1> text', () => {
29+
fixture.detectChanges();
30+
const h1 = de.nativeElement;
31+
expect(h1.innerText).toMatch(/angular/i,
32+
'<h1> should say something about "Angular"');
33+
});
34+
});

‎public/docs/_examples/reactive-forms/ts/app/app.component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion app-comp-ts
4+
import { Component } from '@angular/core';
5+
6+
@Component({
7+
moduleId: module.id,
8+
selector: 'my-app',
9+
templateUrl: './app.component.html'
10+
})
11+
export class AppComponent { }
12+
13+
// #enddocregion app-comp-ts
14+
// #enddocregion

‎public/docs/_examples/reactive-forms/ts/app/app.module.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion app-module
4+
// #docregion reactive-imports
5+
import { NgModule } from '@angular/core';
6+
import { BrowserModule } from '@angular/platform-browser';
7+
import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import the module
8+
import { AppComponent } from './app.component';
9+
import { ReactiveFormComponent } from './reactive-form.component';
10+
// #enddocregion reactive-imports
11+
12+
// #docregion add-reactive-forms-module
13+
@NgModule({
14+
imports: [
15+
BrowserModule,
16+
ReactiveFormsModule // <-- #2 add to Angular module imports
17+
],
18+
declarations: [
19+
AppComponent,
20+
// #enddocregion add-reactive-forms-module
21+
ReactiveFormComponent // <-- psst...while you're in here, declare the ReactiveFormComponent
22+
// #docregion add-reactive-forms-module
23+
],
24+
bootstrap: [ AppComponent ]
25+
})
26+
export class AppModule { }
27+
// #enddocregion add-reactive-forms-module
28+
// #enddocregion app-module
29+
30+
// #docregion

‎public/docs/_examples/reactive-forms/ts/app/hero-signup-v1.component.html

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion html-final -->
3+
<div class="wrapper">
4+
<h2>Hero Sign Up</h2>
5+
<form novalidate [formGroup]="form">
6+
<!-- #docregion html-begin -->
7+
<div class="form-group">
8+
<label>Name:</label>
9+
<input class="form-control" formControlName="name">
10+
</div>
11+
<div class="form-group">
12+
<label>Username:</label>
13+
<input class="form-control" formControlName="username">
14+
</div>
15+
<div class="form-group">
16+
<label>Password:</label>
17+
<input class="form-control" formControlName="password">
18+
</div>
19+
<div class="form-group">
20+
<label>Confirm Password:</label>
21+
<input class="form-control" formControlName="confirm">
22+
</div>
23+
<!-- #enddocregion html-begin -->
24+
25+
<div formArrayName="addresses" class="addresses">
26+
<div *ngFor="let address of addresses.controls; let i=index" [formGroupName]="i">
27+
<h3>Fortress of Solitude</h3>
28+
<!-- #docregion add-controls -->
29+
<div class="form-group">
30+
<label>Street:</label>
31+
<input class="form-control" formControlName="street">
32+
</div>
33+
<div class="form-group">
34+
<label>City:</label>
35+
<input class="form-control" formControlName="city">
36+
</div>
37+
<div class="form-group">
38+
<label>State:</label>
39+
<select class="form-control" formControlName="state">
40+
<option>CA</option>
41+
<option>NY</option>
42+
</select>
43+
</div>
44+
<div class="form-group">
45+
<label>Zip Code:</label>
46+
<input class="form-control" formControlName="zip">
47+
</div>
48+
<!-- #enddocregion add-controls -->
49+
</div>
50+
<button (click)="add()">Add Another Secret Lair</button>
51+
</div>
52+
</form>
53+
<!-- #docregion form-value-json -->
54+
<p>Form: {{ form.value | json }}</p>
55+
<!-- #enddocregion form-value-json -->
56+
<!-- <p>First Name FormControl value: {{ form.get('first').value}}</p> -->
57+
<p>Form status: {{ form.status }}</p>
58+
<p>Password status: {{ form.get('account.password').status}}</p>
59+
<p>Account status: {{ form.get('account').errors | json }}</p>
60+
</div>
61+
62+
<!-- #enddocregion html-final -->
63+
64+
65+
66+
<!-- #docplaster -->
67+
<!-- #docregion html-first-->
68+
<div class="wrapper">
69+
<h2>Hero Sign Up</h2>
70+
<form novalidate [formGroup]="form">
71+
<div class="form-group">
72+
<label>Name:</label>
73+
<input class="form-control" formControlName="name">
74+
</div>
75+
<div formGroupName="account">
76+
<div class="form-group">
77+
<label>Username:</label>
78+
<input class="form-control" formControlName="username">
79+
</div>
80+
<div class="form-group">
81+
<label>Password:</label>
82+
<input class="form-control" formControlName="password">
83+
</div>
84+
<div class="form-group">
85+
<label>Confirm Password:</label>
86+
<input class="form-control" formControlName="confirm">
87+
</div>
88+
</div>
89+
<h3>Fortress of Solitude</h3>
90+
<!-- #docregion form-group -->
91+
<!-- #docregion add-controls -->
92+
<div formGroupName="address">
93+
<div class="form-group">
94+
<label>Street:</label>
95+
<input class="form-control" formControlName="street">
96+
</div>
97+
<div class="form-group">
98+
<label>City:</label>
99+
<input class="form-control" formControlName="city">
100+
</div>
101+
<div class="form-group">
102+
<label>State:</label>
103+
<select class="form-control" formControlName="state">
104+
<option>CA</option>
105+
<option>NY</option>
106+
</select>
107+
</div>
108+
<div class="form-group">
109+
<label>Zip Code:</label>
110+
<input class="form-control" formControlName="zip">
111+
</div>
112+
</div>
113+
<!-- #enddocregion add-controls -->
114+
<!-- #enddocregion form-group -->
115+
</div>
116+
<button (click)="add()">Add Another Secret Lair</button>
117+
</div>
118+
</form>
119+
<!-- #docregion form-value-json -->
120+
<p>Form: {{ form.value | json }}</p>
121+
<!-- #enddocregion form-value-json -->
122+
<!-- #docregion inspecting -->
123+
<p>First Name FormControl value: {{ form.get('first').value}}</p>
124+
<!-- #enddocregion inspecting -->
125+
<p>Form status: {{ form.status }}</p>
126+
<!-- #docregion get-inspect -->
127+
<p>Street value: {{ form.get('address.street').value}}</p>
128+
<!-- #enddocregion get-inspect-->
129+
130+
</div>
131+
132+
<!-- #enddocregion html-first -->
133+
134+
135+
136+

‎public/docs/_examples/reactive-forms/ts/app/hero-signup-v1.component.ts

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion reactive-comp-v1
4+
// #docregion reactive-comp-imports-v1
5+
import { Component } from '@angular/core';
6+
import { AbstractControl, FormControl, FormGroup} from '@angular/forms';
7+
// #enddocregion reactive-comp-imports-v1
8+
9+
// #docregion reactive-comp-imports-addon
10+
import { AbstractControl, FormControl, FormGroup, FormBuilder} from '@angular/forms';
11+
// #enddocregion reactive-comp-imports-addon
12+
13+
// #docregion reactive-comp-metadata-v1
14+
@Component({
15+
moduleId: module.id,
16+
selector: 'reactive-form',
17+
templateUrl: './reactive-forms.component.html'
18+
})
19+
// #enddocregion reactive-comp-metadata-v1
20+
21+
// #docregion reactive-comp-class-v1
22+
export class ReactiveFormComponent {
23+
form = new FormGroup ({
24+
name: new FormControl(),
25+
username: new FormControl(),
26+
password: new FormControl(),
27+
confirm: new FormControl()
28+
});
29+
}
30+
// #enddocregion reactive-comp-class-v1
31+
// #enddocregion reactive-comp-v1
32+
33+
// #docregion class-refactor
34+
export class ReactiveFormComponent {
35+
form: FormGroup;
36+
constructor(private _fb: FormBuilder) {
37+
this.form = this._fb.group({
38+
name: '',
39+
username: '',
40+
password: '',
41+
confirm: ''
42+
});
43+
}
44+
}
45+
46+
// #enddocregion class-refactor
47+
48+
// #docregion add-form-controls
49+
export class ReactiveFormComponent {
50+
form: FormGroup;
51+
constructor(private _fb: FormBuilder) {
52+
this.form = this._fb.group({
53+
name: '',
54+
username: '',
55+
password: '',
56+
confirm: '',
57+
street: '',
58+
city: '',
59+
state: '',
60+
zip: ''
61+
});
62+
}
63+
}
64+
65+
// #enddocregion add-form-controls
66+
67+
// #docregion add-group
68+
constructor(private _fb: FormBuilder) {
69+
this.form = this._fb.group({
70+
name: '',
71+
username: '',
72+
password: '',
73+
confirm: '',
74+
address: this._fb.group({
75+
street: '',
76+
city: '',
77+
state: '',
78+
zip: ''
79+
})
80+
});
81+
}
82+
// #enddocregion add-group
83+
// #docregion
84+
85+
// #docregion patch-value
86+
constructor(private _fb: FormBuilder) {
87+
this.form = this._fb.group({
88+
name: '',
89+
username: '',
90+
password: '',
91+
confirm: '',
92+
address: this._fb.group({
93+
street: '',
94+
city: '',
95+
state: '',
96+
zip: ''
97+
})
98+
});
99+
this.form.patchValue({
100+
name: 'Nancy'
101+
});
102+
}
103+
// #enddocregion patch-value
104+
105+
//#docregion set-value
106+
this.form.setValue({
107+
name: 'Nancy',
108+
username: 'NancyD',
109+
password: '',
110+
confirm: '',
111+
address: {
112+
street: '123 Fake Street',
113+
city: 'San Francisco',
114+
state: 'CA',
115+
zip:'12345'
116+
});
117+
// #enddocregion set-value
118+

0 commit comments

Comments
 (0)