|
1 | 1 | include ../_util-fns
|
2 | 2 |
|
3 | 3 | :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. |
5 | 5 | This guide explains reactive forms as you follow the steps to build a "Hero Detail Editor" form.
|
6 | 6 |
|
7 | 7 | a#toc
|
@@ -46,42 +46,54 @@ a#intro
|
46 | 46 | UI-oriented _form model_ that retains the states
|
47 | 47 | and values of the HTML controls on screen.
|
48 | 48 |
|
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. |
51 | 52 |
|
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. |
57 | 58 |
|
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_, |
59 | 66 | treating it as a pure source of original values.
|
60 | 67 | Rather than update the data model directly,
|
61 | 68 | the component extracts user changes and forwards them to an external component or service,
|
62 | 69 | which does something with them (such as saving them)
|
63 | 70 | and returns a new _data model_ to the component that reflects the updated model state.
|
64 | 71 |
|
| 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 | + |
65 | 75 | ### _Template-driven_ forms
|
66 | 76 |
|
67 | 77 | _Template-driven_ forms, introduced in the [Template guide](forms.html), take a completely different approach.
|
68 | 78 |
|
69 | 79 | 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`. |
74 | 86 | Angular updates the mutable _data model_ with user changes as they happen.
|
75 | 87 |
|
76 | 88 | Both data binding and the mutable _data model_ are contrary to reactive principles.
|
77 | 89 | In fact, the `ngModel` directive is only available in the `FormsModule`, not in the `ReactiveFormsModule`.
|
78 | 90 |
|
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, |
81 | 93 | and you are free to choose between them.
|
82 | 94 |
|
83 | 95 | 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 |
85 | 97 | information on _template driven forms_, see the [Template Guide](forms.html).
|
86 | 98 |
|
87 | 99 | You'll learn about reactive forms by building one from scratch,
|
@@ -144,30 +156,14 @@ a#create-component
|
144 | 156 | +makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'reactive-comp-imports','app/hero-detail.component.ts')(format=".")
|
145 | 157 |
|
146 | 158 | :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 |
| - |
162 | 159 | Now enter the `@Component` decorator that specifies the `HeroDetailComponent` metadata:
|
163 | 160 |
|
164 | 161 | +makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'reactive-comp-metadata','app/hero-detail.component.ts (excerpt)')(format=".")
|
165 | 162 |
|
166 | 163 | :marked
|
167 | 164 | 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`. |
171 | 167 |
|
172 | 168 | Next, create an exported `HeroDetailComponent` class with a `FormControl`.
|
173 | 169 |
|
|
0 commit comments