skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update Reactive Forms' FormControl usage description (#48858)

Browse Source 
It seems that the description of the `FormControl` usage is  incorrect or at least the copy is not very helpful for beginners and can be very confusing as we do not have a command to generate a `FormControl`, as far as I know  😄.  Additionally, the link for component generation points to the CLI page instead of the component generation section on the CLI page. It would be DX/UX for readers and users to get where the link's text is supposed to take them.
PR Close #48858
This commit is contained in:
Walid Bouguima
2023-01-26 15:22:41 +01:00
committed by Jessica Janiuk
parent 2352f8dca3
commit 8d3e246dda
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/content/guide/reactive-forms.md
+3 -3
View File
@@ -41,7 +41,7 @@ There are three steps to using form controls.
1. Register the reactive forms module in your application.
This module declares the reactive-form directives that you need to use reactive forms.
1. Generate a new `FormControl` instance and save it in the component.
1. Generate a new component and instantiate a new `FormControl`.
1. Register the `FormControl` in the template.
You can then display the form by adding the component to the template.
@@ -52,9 +52,9 @@ In the example, the user enters their name into an input field, captures that in
| Action | Details |
|:--- |:--- |
| Register the reactive forms module | To use reactive form controls, import `ReactiveFormsModule` from the `@angular/forms` package and add it to your NgModule's `imports` array. <code-example header="src/app/app.module.ts (excerpt)" path="reactive-forms/src/app/app.module.ts" region="imports"></code-example> |
| Generate a new `FormControl` | Use the [CLI command](cli "Using the Angular command-line interface") `ng generate` to generate a component in your project to host the control. <code-example header="src/app/name-editor/name-editor.component.ts" path="reactive-forms/src/app/name-editor/name-editor.component.ts" region="create-control"></code-example> Use the constructor of `FormControl` to set its initial value, which in this case is an empty string. By creating these controls in your component class, you get immediate access to listen for, update, and validate the state of the form input. |
| Generate a new `FormControl` | Use the [CLI command](cli/generate#component-command "Using the Angular command-line interface") `ng generate` to generate a component in your project to host the control. <code-example header="src/app/name-editor/name-editor.component.ts" path="reactive-forms/src/app/name-editor/name-editor.component.ts" region="create-control"></code-example> Use the constructor of `FormControl` to set its initial value, which in this case is an empty string. By creating these controls in your component class, you get immediate access to listen for, update, and validate the state of the form input. |
| Register the control in the template | After you create the control in the component class, you must associate it with a form control element in the template. Update the template with the form control using the `formControl` binding provided by `FormControlDirective`, which is also included in the `ReactiveFormsModule`. <code-example header="src/app/name-editor/name-editor.component.html" path="reactive-forms/src/app/name-editor/name-editor.component.html" region="control-binding"></code-example> <div class="alert is-helpful"> <ul> <li> For a summary of the classes and directives provided by `ReactiveFormsModule`, see the following [Reactive forms API](#reactive-forms-api "API summary") section </li> <li> For complete syntax details of these classes and directives, see the API reference documentation for the [Forms package](api/forms "API reference") </li> </ul> </div> Using the template binding syntax, the form control is now registered to the `name` input element in the template. The form control and DOM element communicate with each other: the view reflects changes in the model, and the model reflects changes in the view. |
| Display the component | The form control assigned to `name` is displayed when the component is added to a template. <code-example header="src/app/app.component.html (name editor)" path="reactive-forms/src/app/app.component.1.html" region="app-name-editor"></code-example> <div class="lightbox"> <img alt="Name Editor, which has a name label and an input so the user can enter a name" src="generated/images/guide/reactive-forms/name-editor-1.png"> </div> |
| Display the component | The `FormControl` assigned to the `name` property is displayed when the property's host component is added to a template. <code-example header="src/app/app.component.html (name editor)" path="reactive-forms/src/app/app.component.1.html" region="app-name-editor"></code-example> <div class="lightbox"> <img alt="Name Editor, which has a name label and an input so the user can enter a name" src="generated/images/guide/reactive-forms/name-editor-1.png"> </div> |
<a id="display-value"></a>