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

Commit b5e9660

Browse files
kapunahelewongkapunahelewong
committed
Updates after Ward saved me
1 parent e56bfd4 commit b5e9660

11 files changed

+393
-333
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
44
import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import the module
55
import { AppComponent } from './app.component';
6-
import { HeroSignUpComponent } from './hero-signup.component';
6+
import { HeroSignUpComponent } from './hero-signup.component'; // <-- #1 import the component you're making
77

88
@NgModule({
99
imports: [

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

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Component } from '@angular/core';
1414
<hero-signup-4></hero-signup-4>
1515
<hero-signup-5></hero-signup-5>
1616
<hero-signup-6></hero-signup-6>
17+
<hero-signup-7></hero-signup-7>
1718
</div>`
1819
})
1920
export class DemoComponent { }

‎public/docs/_examples/reactive-forms/ts/app/hero-signup-1.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/app/hero-signup-2.component.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- #docregion -->
1+
<!-- #docregion basic-form-->
22
<form novalidate [formGroup]="form">
33
<div class="form-group">
44
<label>Name:</label>
@@ -17,3 +17,8 @@
1717
<input class="form-control" formControlName="confirm">
1818
</div>
1919
</form>
20+
<!-- #enddocregion basic-form-->
21+
22+
<!-- #docregion form-value-json -->
23+
<p>Form: {{ form.value | json }}</p>
24+
<!-- #enddocregion form-value-json -->

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

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!-- #docregion -->
2+
<form novalidate [formGroup]="form">
3+
<div class="form-group">
4+
<label>Name:</label>
5+
<input class="form-control" formControlName="name">
6+
</div>
7+
<div class="form-group">
8+
<label>Username:</label>
9+
<input class="form-control" formControlName="username">
10+
</div>
11+
<div class="form-group">
12+
<label>Password:</label>
13+
<input class="form-control" formControlName="password">
14+
</div>
15+
<div class="form-group">
16+
<label>Confirm Password:</label>
17+
<input class="form-control" formControlName="confirm">
18+
</div>
19+
<div class="form-group">
20+
<label>Street:</label>
21+
<input class="form-control" formControlName="street">
22+
</div>
23+
<div class="form-group">
24+
<label>City:</label>
25+
<input class="form-control" formControlName="city">
26+
</div>
27+
<div class="form-group">
28+
<label>State:</label>
29+
<select class="form-control" formControlName="state">
30+
<option>CA</option>
31+
<option>NY</option>
32+
</select>
33+
</div>
34+
<div class="form-group">
35+
<label>Zip Code:</label>
36+
<input class="form-control" formControlName="zip">
37+
</div>
38+
</form>

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<h2>Hero Sign Up</h2>
2+
<form novalidate [formGroup]="form">
3+
<div class="form-group">
4+
<label>Name:</label>
5+
<input class="form-control" formControlName="name">
6+
</div>
7+
<div formGroupName="account">
8+
<div class="form-group">
9+
<label>Username:</label>
10+
<input class="form-control" formControlName="username">
11+
</div>
12+
<div class="form-group">
13+
<label>Password:</label>
14+
<input class="form-control" formControlName="password">
15+
</div>
16+
<div class="form-group">
17+
<label>Confirm Password:</label>
18+
<input class="form-control" formControlName="confirm">
19+
</div>
20+
</div>
21+
<!-- #docregion add-group-->
22+
<div formGroupName="address">
23+
<h3>Fortress of Solitude</h3>
24+
<div class="form-group">
25+
<label>Street:</label>
26+
<input class="form-control" formControlName="street">
27+
</div>
28+
<div class="form-group">
29+
<label>City:</label>
30+
<input class="form-control" formControlName="city">
31+
</div>
32+
<div class="form-group">
33+
<label>State:</label>
34+
<select class="form-control" formControlName="state">
35+
<option>CA</option>
36+
<option>NY</option>
37+
</select>
38+
</div>
39+
<div class="form-group">
40+
<label>Zip Code:</label>
41+
<input class="form-control" formControlName="zip">
42+
</div>
43+
</div>
44+
<!-- #enddocregion add-group-->
45+
</form>
46+
47+
<!-- #docregion inspect-value -->
48+
<p>Name value: {{ form.get('name').value }}</p>
49+
<!-- #enddocregion inspect-value -->
50+
51+
<!-- #docregion inspect-child-control -->
52+
<p>Street status: {{ form.get('address.street').status}}</p>
53+
<!-- #enddocregion inspect-child-control -->

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

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<h2>Hero Sign Up</h2>
2+
<form novalidate [formGroup]="form">
3+
<div class="form-group">
4+
<label>Name:</label>
5+
<input class="form-control" formControlName="name">
6+
</div>
7+
<div formGroupName="account">
8+
<div class="form-group">
9+
<label>Username:</label>
10+
<input class="form-control" formControlName="username">
11+
</div>
12+
<div class="form-group">
13+
<label>Password:</label>
14+
<input class="form-control" formControlName="password">
15+
</div>
16+
<div class="form-group">
17+
<label>Confirm Password:</label>
18+
<input class="form-control" formControlName="confirm">
19+
</div>
20+
</div>
21+
<!-- #docregion form-array-->
22+
<div formArrayName="addresses"> <!-- update, changing from formGroupName-->
23+
<!-- wrap everything in an *ngFor -->
24+
<div *ngFor="let address of addresses.controls; let i=index" [formGroupName]="i">
25+
<h3>Fortress of Solitude</h3>
26+
<div class="form-group">
27+
<label>Street:</label>
28+
<input class="form-control" formControlName="street">
29+
</div>
30+
<div class="form-group">
31+
<label>City:</label>
32+
<input class="form-control" formControlName="city">
33+
</div>
34+
<div class="form-group">
35+
<label>State:</label>
36+
<select class="form-control" formControlName="state">
37+
<option>CA</option>
38+
<option>NY</option>
39+
</select>
40+
</div>
41+
<div class="form-group">
42+
<label>Zip Code:</label>
43+
<input class="form-control" formControlName="zip">
44+
</div>
45+
</div> <!-- end *ngFor div-->
46+
<button (click)="add()">Add Another Secret Lair</button>
47+
</div>
48+
<!-- #enddocregion form-array-->
49+
</form>

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

-140
This file was deleted.

0 commit comments

Comments
 (0)