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

Commit 0181b1f

Browse files
docs(reactive-forms): add Kara's comments
1 parent 35c4dab commit 0181b1f

File tree

3 files changed

+28
-14
lines changed

3 files changed

+28
-14
lines changed

public/docs/_examples/reactive-forms/ts/app/hero-detail-1.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,8 @@ <h3><i>FormGroup with a single FormControl</i></h3>
77
<input class="form-control" formControlName="name">
88
</div>
99
</form>
10+
11+
12+
<!--<input formControlName="name1">-->
13+
<input [formControl]="ctrl">
1014
<!-- #enddocregion basic-form-->

public/docs/_examples/reactive-forms/ts/app/hero-detail-1.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,13 @@ export class HeroDetailComponent1 {
1414
heroForm = new FormGroup ({
1515
name: new FormControl()
1616
});
17+
// This requires a FormGroup
18+
simpleFormControl = new FormControl({
19+
name1: ''
20+
})
21+
}
22+
// This one causes: Cannot find control with unspecified name attribute
23+
export class Something {
24+
ctrl = new FormControl()
1725
}
1826
// #enddocregion v1

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,12 @@ a#intro
4444
that favors explicit management of the data flowing between
4545
a non-UI _data model_ (typically retrieved from a server) and a
4646
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.
4849

4950
With _reactive_ forms, you create a tree of Angular form control objects
5051
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.
5253

5354
With reactive forms, you create and manipulate form control objects directly in the
5455
component class. As the component class has immediate access to both the data
@@ -77,16 +78,15 @@ a#intro
7778

7879
You place HTML form controls (such as `<input>` and `<select>`) in the component template and
7980
bind them to _data model_ properties in the component, using directives
80-
like `[(ngModel)]`.
81+
like `ngModel`.
8182

8283
You don't create Angular form control objects. Angular directives
8384
create them for you, using the information in your data bindings.
8485
You don't push and pull data values. Angular handles that for you with `ngModel`.
8586
Angular updates the mutable _data model_ with user changes as they happen.
8687

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.
9090

9191
These differences reflect two architectural paradigms,
9292
with their own strengths and weaknesses,
@@ -98,7 +98,7 @@ a#intro
9898

9999
You'll learn about reactive forms by building one from scratch.
100100

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.
102102
Then you'll [learn about the Angular form classes](#essentials) and how to use them in a reactive form.
103103

104104
.l-main-section
@@ -422,19 +422,20 @@ table(width="100%")
422422
td <code>myControl.status</code>
423423
td
424424
: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`.
427427
tr
428428
td <code>myControl.pristine</code>
429429
td
430430
:marked
431431
`true` if the user has _not_ changed the value in the UI.
432+
Its opposite is `myControl.dirty`.
432433
tr
433434
td <code>myControl.untouched</code>
434435
td
435436
:marked
436437
`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`.
438439

439440
:marked
440441
Learn about other `FormControl` properties in the
@@ -515,9 +516,10 @@ a#set-data
515516
:marked
516517
The `setValue` method checks the data object thoroughly before assigning any form control values.
517518

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.
521523

522524
If you have a typo or nested controls incorrectly, `setValue` will catch
523525
the error and report it clearly. `patchValue` will fail silently.
@@ -602,7 +604,7 @@ figure.image-display
602604
The `HeroListComponent` uses an injected `HeroService` to retrieve heroes from the server
603605
and then presents those heroes to the user as a series of buttons.
604606
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,
606608
both to simulate network latency and to indicate visually
607609
the necessarily asynchronous nature of the application.
608610

0 commit comments

Comments
 (0)