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

Commit d6586a4

Browse files
First portion of Kara's comments
1 parent d049dbb commit d6586a4

File tree

1 file changed

+30
-34
lines changed

1 file changed

+30
-34
lines changed

public/docs/ts/latest/guide/reactive-forms.jade

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
include ../_util-fns
22

33
:marked
4-
_Reactive forms_ is an Angular technology for creating data entry forms in a _reactive_ style.
4+
_Reactive forms_ is an Angular technology for creating forms in a _reactive_ style.
55
This guide explains reactive forms as you follow the steps to build a "Hero Detail Editor" form.
66

77
a#toc
@@ -46,42 +46,54 @@ a#intro
4646
UI-oriented _form model_ that retains the states
4747
and values of the HTML controls on screen.
4848

49-
With _reactive_ forms, you create a tree of Angular form controls in code, and
50-
bind them to HTML widgets in the component template, using techniques described in this guide.
49+
With _reactive_ forms, you create a tree of Angular form control objects
50+
in the component class and bind them to native form control elements in the
51+
component template, using techniques described in this guide.
5152

52-
The component class is responsible for all data flowing between the component and the screen.
53-
It has immediate access to both the data model and the form control structure.
54-
It pushes data model values into the form controls and
55-
pulls user-changed values back out of the form controls.
56-
The component can _observe_ changes in form control state and _react_ to those changes.
53+
With reactive forms, you create and manipulate form control objects directly in the
54+
component class. As the component class has immediate access to both the data
55+
model and the form control structure, you can push data model values into
56+
the form controls and pull user-changed values back out. The component can
57+
observe changes in form control state and react to those changes.
5758

58-
In keeping with the reactive paradigm, the component should preserve the immutability of the _data model_,
59+
One advantage of working with the form control objects directly is that
60+
value and validity updates are always synchronous. This contrasts with
61+
template-driven forms, which must update asynchronously because they
62+
delegate operations to a directive running in the template.
63+
64+
In keeping with the reactive paradigm, the component
65+
preserves the immutability of the _data model_,
5966
treating it as a pure source of original values.
6067
Rather than update the data model directly,
6168
the component extracts user changes and forwards them to an external component or service,
6269
which does something with them (such as saving them)
6370
and returns a new _data model_ to the component that reflects the updated model state.
6471

72+
Using reactive form directives does not require you to follow all reactive priniciples,
73+
but it does facilitate the reactive programming approach should you choose to use it.
74+
6575
### _Template-driven_ forms
6676

6777
_Template-driven_ forms, introduced in the [Template guide](forms.html), take a completely different approach.
6878

6979
You place HTML form controls (such as `<input>` and `<select>`) in the component template and
70-
bind them to _data model_ properties in the component, using the `[(ngModel)]` two-way data binding directive.
71-
72-
You don't create Angular form controls. Angular infers them from the data bindings.
73-
You don't push and pull data values. Angular handles that for you with `[(ngModel)]`.
80+
bind them to _data model_ properties in the component, using directives
81+
like `[(ngModel)]`.
82+
83+
You don't create Angular form control objects. Angular directives
84+
create them for you, using the information in your data bindings.
85+
You don't push and pull data values. Angular handles that for you with `ngModel`.
7486
Angular updates the mutable _data model_ with user changes as they happen.
7587

7688
Both data binding and the mutable _data model_ are contrary to reactive principles.
7789
In fact, the `ngModel` directive is only available in the `FormsModule`, not in the `ReactiveFormsModule`.
7890

79-
These diffences don't make _template-driven forms_ wrong and _reactive forms_ right.
80-
These are different architectural paradigms, with their own strengths and weaknesses,
91+
These differences reflect two architectural paradigms,
92+
with their own strengths and weaknesses,
8193
and you are free to choose between them.
8294

8395
The balance of this _reactive forms_ guide assumes the _reactive_ paradigm and
84-
concentrates exclusively on the reactive forms technology and techniques. For
96+
concentrates exclusively on the reactive forms technique. For
8597
information on _template driven forms_, see the [Template Guide](forms.html).
8698

8799
You'll learn about reactive forms by building one from scratch,
@@ -144,30 +156,14 @@ a#create-component
144156
+makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'reactive-comp-imports','app/hero-detail.component.ts')(format=".")
145157

146158
:marked
147-
Here’s a summary description of the imported symbols, whose meaning and use
148-
will become clear over the course of this guide:
149-
150-
- `Component`: the Angular decorator that describes the component in metadata.
151-
- `EventEmitter`: a class that emits events that are handled by a parent component.
152-
- `Input`: identifies a component's public input properties for data binding by a parent component.
153-
- `Output`: identifies a component's public output properties for data binding by a parent component.
154-
- `OnChanges`: a component lifecycle hook that Angular calls when input values change.
155-
- `FormArray`: an array of `FormControls`.
156-
- `FormBuilder`: a builder of `FormControls`, `FormGroups`, and `FormArrays`.
157-
- `FormControl`: a representation of an HTML form control.
158-
- `FormGroup`: a group of `FormControls`, `FormArrays`, and other `FormGroups`.
159-
- `Address` and `Hero` are application model classes.
160-
- `states`: U.S. states (test data).
161-
162159
Now enter the `@Component` decorator that specifies the `HeroDetailComponent` metadata:
163160

164161
+makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'reactive-comp-metadata','app/hero-detail.component.ts (excerpt)')(format=".")
165162

166163
:marked
167164
The `moduleId: module.id` lets you use
168-
[component-relative paths](./cookbook/component-relative-paths.html) in file URLs.
169-
The `selector` tells Angular the name of the element tag that renders this form.
170-
The `templateUrl` is the location of the HTML template that displays the form.
165+
[component-relative paths](./cookbook/component-relative-paths.html) in file URLs
166+
such as when specifying the `templateUrl`.
171167

172168
Next, create an exported `HeroDetailComponent` class with a `FormControl`.
173169

0 commit comments

Comments
 (0)