diff --git a/adev/src/content/guide/forms/form-validation.md b/adev/src/content/guide/forms/form-validation.md index 1020dc993be..b7eb723b7fd 100644 --- a/adev/src/content/guide/forms/form-validation.md +++ b/adev/src/content/guide/forms/form-validation.md @@ -79,7 +79,7 @@ If you look at the template for the `name` input again, it is fairly similar to This form differs from the template-driven version in that it no longer exports any directives. Instead, it uses the `name` getter defined in the component class. -Notice that the `required` attribute is still present in the template. Although it's not necessary for validation, it should be retained to for accessibility purposes. +Notice that the `required` attribute is still present in the template. Although it's not necessary for validation, it should be retained for accessibility purposes. ## Defining custom validators diff --git a/adev/src/content/guide/forms/reactive-forms.md b/adev/src/content/guide/forms/reactive-forms.md index 8c0060dfe62..a646758aae7 100644 --- a/adev/src/content/guide/forms/reactive-forms.md +++ b/adev/src/content/guide/forms/reactive-forms.md @@ -151,7 +151,7 @@ Just as a form group contains a group of controls, the *profileForm* `FormGroup` -The `ProfileEditor` component accepts input from the user, but in a real scenario you want to capture the form value and make available for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method. +The `ProfileEditor` component accepts input from the user, but in a real scenario you want to capture the form value and make it available for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method. diff --git a/adev/src/content/guide/forms/template-driven-forms.md b/adev/src/content/guide/forms/template-driven-forms.md index 412df5ca584..cbf0860be0b 100644 --- a/adev/src/content/guide/forms/template-driven-forms.md +++ b/adev/src/content/guide/forms/template-driven-forms.md @@ -5,7 +5,7 @@ This tutorial shows you how to create a template-driven form. The control elemen Template-driven forms use [two-way data binding](guide/templates/two-way-binding) to update the data model in the component as changes are made in the template and vice versa. -Angular supports two design approaches for interactive forms. Template-driven forms allow you to use form-specific directives in your Angular template.Reactive forms provide a model-driven approach to building forms. +Angular supports two design approaches for interactive forms. Template-driven forms allow you to use form-specific directives in your Angular template. Reactive forms provide a model-driven approach to building forms. Template-driven forms are a great choice for small or simple forms, while reactive forms are more scalable and suitable for complex forms. For a comparison of the two approaches, see [Choosing an approach](guide/forms#choosing-an-approach) @@ -294,7 +294,7 @@ To let form users add a new actor, you will add a **New Actor** button that resp -1. Bind the button's click event to a actor-creation method, `newActor()`. +1. Bind the button's click event to an actor-creation method, `newActor()`. diff --git a/adev/src/content/guide/i18n/overview.md b/adev/src/content/guide/i18n/overview.md index 3a97ce77b41..0ad407604cf 100644 --- a/adev/src/content/guide/i18n/overview.md +++ b/adev/src/content/guide/i18n/overview.md @@ -8,7 +8,7 @@ The localization process includes the following actions. * Format data for a specific locale A *locale* identifies a region in which people speak a particular language or language variant. -Possible regions includes countries and geographical regions. +Possible regions include countries and geographical regions. A locale determines the formatting and parsing of the following details. * Measurement units including date and time, numbers, and currencies diff --git a/adev/src/content/guide/image-optimization.md b/adev/src/content/guide/image-optimization.md index e665a46d098..902cf7e84cf 100644 --- a/adev/src/content/guide/image-optimization.md +++ b/adev/src/content/guide/image-optimization.md @@ -345,7 +345,7 @@ Note: even though the `width` property may not always be present, a custom loade ### The `loaderParams` Property -There is an additional attribute supported by the `NgOptimizedImage` directive, called `loaderParams`, which is specifically designed to support the use of custom loaders. The `loaderParams` attribute take an object with any properties as a value, and does not do anything on its own. The data in `loaderParams` is added to the `ImageLoaderConfig` object passed to your custom loader, and can be used to control the behavior of the loader. +There is an additional attribute supported by the `NgOptimizedImage` directive, called `loaderParams`, which is specifically designed to support the use of custom loaders. The `loaderParams` attribute takes an object with any properties as a value, and does not do anything on its own. The data in `loaderParams` is added to the `ImageLoaderConfig` object passed to your custom loader, and can be used to control the behavior of the loader. A common use for `loaderParams` is controlling advanced image CDN features. diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md index 75d69fe88e0..08ac3ac1ed3 100644 --- a/aio/content/guide/form-validation.md +++ b/aio/content/guide/form-validation.md @@ -110,7 +110,7 @@ This form differs from the template-driven version in that it no longer exports Instead, it uses the `name` getter defined in the component class. Notice that the `required` attribute is still present in the template. -Although it's not necessary for validation, it should be retained to for accessibility purposes. +Although it's not necessary for validation, it should be retained for accessibility purposes. diff --git a/aio/content/guide/i18n-overview.md b/aio/content/guide/i18n-overview.md index 8aa28beae0c..2448d391f07 100644 --- a/aio/content/guide/i18n-overview.md +++ b/aio/content/guide/i18n-overview.md @@ -10,7 +10,7 @@ The localization process includes the following actions. * Format data for a specific locale A *locale* identifies a region in which people speak a particular language or language variant. -Possible regions includes countries and geographical regions. +Possible regions include countries and geographical regions. A locale determines the formatting and parsing of the following details. * Measurement units including date and time, numbers, and currencies diff --git a/aio/content/guide/image-directive.md b/aio/content/guide/image-directive.md index 7e45926acea..8b76c18ebdc 100644 --- a/aio/content/guide/image-directive.md +++ b/aio/content/guide/image-directive.md @@ -338,7 +338,7 @@ Note: even though the `width` property may not always be present, a custom loade ### The `loaderParams` Property -There is an additional attribute supported by the `NgOptimizedImage` directive, called `loaderParams`, which is specifically designed to support the use of custom loaders. The `loaderParams` attribute take an object with any properties as a value, and does not do anything on its own. The data in `loaderParams` is added to the `ImageLoaderConfig` object passed to your custom loader, and can be used to control the behavior of the loader. +There is an additional attribute supported by the `NgOptimizedImage` directive, called `loaderParams`, which is specifically designed to support the use of custom loaders. The `loaderParams` attribute takes an object with any properties as a value, and does not do anything on its own. The data in `loaderParams` is added to the `ImageLoaderConfig` object passed to your custom loader, and can be used to control the behavior of the loader. A common use for `loaderParams` is controlling advanced image CDN features. diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index 6484e2f7488..4d18bfbce91 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -137,7 +137,7 @@ To add a form group to this component, take the following steps. |:--- |:--- | | Create a `FormGroup` instance | Create a property in the component class named `profileForm` and set the property to a new form group instance. To initialize the form group, provide the constructor with an object of named keys mapped to their control.
For the profile form, add two form control instances with the names `firstName` and `lastName`. The individual form controls are now collected within a group. A `FormGroup` instance provides its model value as an object reduced from the values of each control in the group. A form group instance has the same properties \(such as `value` and `untouched`\) and methods \(such as `setValue()`\) as a form control instance. | | Associate the `FormGroup` model and view | A form group tracks the status and changes for each of its controls, so if one of the controls changes, the parent control also emits a new status or value change. The model for the group is maintained from its members. After you define the model, you must update the template to reflect the model in the view.
**NOTE**:
Just as a form group contains a group of controls, the *profileForm* `FormGroup` is bound to the `form` element with the `FormGroup` directive, creating a communication layer between the model and the form containing the inputs.
The `formControlName` input provided by the `FormControlName` directive binds each individual input to the form control defined in `FormGroup`. The form controls communicate with their respective elements. They also communicate changes to the form group instance, which provides the source of truth for the model value. | -| Save form data | The `ProfileEditor` component accepts input from the user, but in a real scenario you want to capture the form value and make available for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method. The `onSubmit()` method in the `ProfileEditor` component captures the current value of `profileForm`. Use `EventEmitter` to keep the form encapsulated and to provide the form value outside the component. The following example uses `console.warn` to log a message to the browser console. The `submit` event is emitted by the `form` tag using the built-in DOM event. You trigger the event by clicking a button with `submit` type. This lets the user press the **Enter** key to submit the completed form.
Use a `button` element to add a button to the bottom of the form to trigger the form submission.
**NOTE**:
The button in the preceding snippet also has a `disabled` binding attached to it to disable the button when `profileForm` is invalid. You aren't performing any validation yet, so the button is always enabled. Basic form validation is covered in the [Validating form input](#basic-form-validation "Basic form validation.") section.
| +| Save form data | The `ProfileEditor` component accepts input from the user, but in a real scenario you want to capture the form value and make it available for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method. The `onSubmit()` method in the `ProfileEditor` component captures the current value of `profileForm`. Use `EventEmitter` to keep the form encapsulated and to provide the form value outside the component. The following example uses `console.warn` to log a message to the browser console. The `submit` event is emitted by the `form` tag using the built-in DOM event. You trigger the event by clicking a button with `submit` type. This lets the user press the **Enter** key to submit the completed form.
Use a `button` element to add a button to the bottom of the form to trigger the form submission.
**NOTE**:
The button in the preceding snippet also has a `disabled` binding attached to it to disable the button when `profileForm` is invalid. You aren't performing any validation yet, so the button is always enabled. Basic form validation is covered in the [Validating form input](#basic-form-validation "Basic form validation.") section.
| | Display the component | To display the `ProfileEditor` component that contains the form, add it to a component template. `ProfileEditor` lets you manage the form control instances for the `firstName` and `lastName` controls within the form group instance.
Profile Editor with labels and inputs for first and last name as well as a submit button
|