Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 9078a6a

Browse files
committed
docs(guide/form): shorten line lengths for better readability
1 parent e9dcec0 commit 9078a6a

File tree

1 file changed

+26
-18
lines changed

1 file changed

+26
-18
lines changed

docs/content/guide/forms.ngdoc

+26-18
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@ Controls (`input`, `select`, `textarea`) are ways for a user to enter data.
77
A Form is a collection of controls for the purpose of grouping related controls together.
88

99
Form and controls provide validation services, so that the user can be notified of invalid input.
10-
This provides a better user experience, because the user gets instant feedback on how to correct the error.
11-
Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted.
10+
This provides a better user experience, because the user gets instant feedback on how to
11+
correct the error. Keep in mind that while client-side validation plays an important role
12+
in providing good user experience, it can easily be circumvented and thus can not be trusted.
1213
Server-side validation is still necessary for a secure application.
1314

1415

1516
# Simple form
1617
The key directive in understanding two-way data-binding is {@link ng.directive:ngModel ngModel}.
17-
The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
18-
In addition it provides an {@link ngModel.NgModelController API} for other directives to augment its behavior.
18+
The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view,
19+
as well as view to the model. In addition it provides an {@link ngModel.NgModelController API}
20+
for other directives to augment its behavior.
1921

2022
<example module="formExample">
2123
<file name="index.html">
@@ -71,8 +73,9 @@ To allow styling of form as well as controls, `ngModel` adds these CSS classes:
7173
- `ng-pending`: any `$asyncValidators` are unfulfilled
7274

7375
The following example uses the CSS to display validity of each form control.
74-
In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty.
75-
This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.
76+
In the example both `user.name` and `user.email` are required, but are rendered
77+
with red background only when they are dirty. This ensures that the user is not distracted
78+
with an error until after interacting with the control, and failing to satisfy its validity.
7679

7780
<example module="formExample">
7881
<file name="index.html">
@@ -125,9 +128,9 @@ A form is an instance of {@link form.FormController FormController}.
125128
The form instance can optionally be published into the scope using the `name` attribute.
126129

127130
Similarly, an input control that has the {@link ng.directive:ngModel ngModel} directive holds an
128-
instance of {@link ngModel.NgModelController NgModelController}.
129-
Such a control instance can be published as a property of the form instance using the `name` attribute
130-
on the input control. The name attribute specifies the name of the property on the form instance.
131+
instance of {@link ngModel.NgModelController NgModelController}.Such a control instance
132+
can be published as a property of the form instance using the `name` attribute on the input control.
133+
The name attribute specifies the name of the property on the form instance.
131134

132135
This implies that the internal state of both the form and the control is available for binding in
133136
the view using the standard binding primitives.
@@ -203,8 +206,8 @@ and validation, add "default" as one of the specified events.
203206

204207
I.e. `ng-model-options="{ updateOn: 'default blur' }"`
205208

206-
The following example shows how to override immediate updates. Changes on the inputs within the form will update the model
207-
only when the control loses focus (blur event).
209+
The following example shows how to override immediate updates. Changes on the inputs within the form
210+
will update the model only when the control loses focus (blur event).
208211

209212
<example module="customTriggerExample">
210213
<file name="index.html">
@@ -244,10 +247,11 @@ in `debounce`. This can be useful to force immediate updates on some specific ci
244247

245248
I.e. `ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"`
246249

247-
If those attributes are added to an element, they will be applied to all the child elements and controls that inherit from it unless they are
248-
overridden.
250+
If those attributes are added to an element, they will be applied to all the child elements and
251+
controls that inherit from it unless they are overridden.
249252

250-
This example shows how to debounce model changes. Model will be updated only 250 milliseconds after last change.
253+
This example shows how to debounce model changes. Model will be updated only 250 milliseconds
254+
after last change.
251255

252256
<example module="debounceExample">
253257
<file name="index.html">
@@ -430,13 +434,17 @@ Note that you can alternatively use `ng-pattern` to further restrict the validat
430434

431435

432436
# Implementing custom form controls (using `ngModel`)
433-
Angular implements all of the basic HTML form controls ({@link ng.directive:input input}, {@link ng.directive:select select}, {@link ng.directive:textarea textarea}), which should be sufficient for most cases.
434-
However, if you need more flexibility, you can write your own form control as a directive.
437+
Angular implements all of the basic HTML form controls ({@link ng.directive:input input},
438+
{@link ng.directive:select select}, {@link ng.directive:textarea textarea}),
439+
which should be sufficient for most cases. However, if you need more flexibility,
440+
you can write your own form control as a directive.
435441

436442
In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to:
437443

438-
- implement `$render` method, which is responsible for rendering the data after it passed the {@link ngModel.NgModelController#$formatters `NgModelController.$formatters`},
439-
- call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener.
444+
- implement `$render` method, which is responsible for rendering the data after it passed the
445+
{@link ngModel.NgModelController#$formatters `NgModelController.$formatters`},
446+
- call `$setViewValue` method, whenever the user interacts with the control and model
447+
needs to be updated. This is usually done inside a DOM Event listener.
440448

441449
See {@link guide/directive `$compileProvider.directive`} for more info.
442450

0 commit comments

Comments
 (0)