@@ -44,11 +44,12 @@ a#intro
44
44
that favors explicit management of the data flowing between
45
45
a non-UI _data model_ (typically retrieved from a server) and a
46
46
UI-oriented _form model_ that retains the states
47
- and values of the HTML controls on screen.
47
+ and values of the HTML controls on screen. Reactive forms offer the ease
48
+ of using reactive patterns, testing, and validation.
48
49
49
50
With _reactive_ forms, you create a tree of Angular form control objects
50
51
in the component class and bind them to native form control elements in the
51
- component template, using techniques described in this guide.
52
+ component template, using techniques described in this guide.
52
53
53
54
With reactive forms, you create and manipulate form control objects directly in the
54
55
component class. As the component class has immediate access to both the data
@@ -77,16 +78,15 @@ a#intro
77
78
78
79
You place HTML form controls (such as `<input>` and `<select>`) in the component template and
79
80
bind them to _data model_ properties in the component, using directives
80
- like `[( ngModel)] `.
81
+ like `ngModel`.
81
82
82
83
You don't create Angular form control objects. Angular directives
83
84
create them for you, using the information in your data bindings.
84
85
You don't push and pull data values. Angular handles that for you with `ngModel`.
85
86
Angular updates the mutable _data model_ with user changes as they happen.
86
87
87
- When writing in a reactive style, you determine the timing and flow of data between
88
- the data model and the screen. You rarely, if ever, use two-way data binding.
89
- For this reason, the ngModel directive is not part of the ReactiveFormsModule.
88
+ When writing in a reactive style, you rarely, if ever, use two-way data binding.
89
+ For this reason, the `ngModel` directive is not part of the ReactiveFormsModule.
90
90
91
91
These differences reflect two architectural paradigms,
92
92
with their own strengths and weaknesses,
@@ -98,7 +98,7 @@ a#intro
98
98
99
99
You'll learn about reactive forms by building one from scratch.
100
100
101
- In the next section, you'll prepare your project for reactive forms .
101
+ In the next section, you'll set up your project for the reactive form demo .
102
102
Then you'll [learn about the Angular form classes](#essentials) and how to use them in a reactive form.
103
103
104
104
.l-main-section
@@ -422,19 +422,20 @@ table(width="100%")
422
422
td <code >myControl.status</code >
423
423
td
424
424
:marked
425
- the validity of a `FormControl`. Possible values: `valid `,
426
- `invalid `, `pending `, or `disabled `.
425
+ the validity of a `FormControl`. Possible values: `VALID `,
426
+ `INVALID `, `PENDING `, or `DISABLED `.
427
427
tr
428
428
td <code >myControl.pristine</code >
429
429
td
430
430
:marked
431
431
`true` if the user has _not_ changed the value in the UI.
432
+ Its opposite is `myControl.dirty`.
432
433
tr
433
434
td <code >myControl.untouched</code >
434
435
td
435
436
:marked
436
437
`true` if the control user has not yet entered the HTML control
437
- and triggered its blur event.
438
+ and triggered its blur event. Its opposite is `myControl.touched`.
438
439
439
440
:marked
440
441
Learn about other `FormControl` properties in the
@@ -515,9 +516,10 @@ a#set-data
515
516
:marked
516
517
The `setValue` method checks the data object thoroughly before assigning any form control values.
517
518
518
- - It rejects a data object that doesn't match the `FormGroup` structure.
519
- - It rejects a data object if it is missing values for any control in the group.
520
- - It returns helpful error messages.
519
+ It will not accept a data object that doesn't match the FormGroup structure or is
520
+ missing values for any control in the group. This way, it can return helpful
521
+ error messages if you have a typo or if you've nested controls incorrectly.
522
+ `patchValue` will fail silently.
521
523
522
524
If you have a typo or nested controls incorrectly, `setValue` will catch
523
525
the error and report it clearly. `patchValue` will fail silently.
@@ -602,7 +604,7 @@ figure.image-display
602
604
The `HeroListComponent` uses an injected `HeroService` to retrieve heroes from the server
603
605
and then presents those heroes to the user as a series of buttons.
604
606
The `HeroService` emulates an HTTP service.
605
- It returns a `Promise ` of heroes that resolves after a short delay,
607
+ It returns an `Observable ` of heroes that resolves after a short delay,
606
608
both to simulate network latency and to indicate visually
607
609
the necessarily asynchronous nature of the application.
608
610
0 commit comments