docs(forms): migrate @whatItDoes tags to the description (#23186)

We get the overview for the doc by splitting off the first
paragraph.

PR Close #23186

packages/forms/src/directives/ng_form.ts

@@ -26,11 +26,11 @@ export const formDirectiveProvider: any = {
 const resolvedPromise = Promise.resolve(null);
 
 /**
- * @whatItDoes Creates a top-level {@link FormGroup} instance and binds it to a form
- * to track aggregate form value and validation status.
- *
  * @description
  *
+ * Creates a top-level {@link FormGroup} instance and binds it to a form
+ * to track aggregate form value and validation status.
+ *
  * As soon as you import the `FormsModule`, this directive becomes active by default on
  * all `<form>` tags.  You don't need to add a special selector.
  *

packages/forms/src/directives/ng_model.ts

@@ -46,7 +46,9 @@ export const formControlBinding: any = {
 const resolvedPromise = Promise.resolve(null);
 
 /**
- * @whatItDoes Creates a {@link FormControl} instance from a domain model and binds it
+ * @description
+ *
+ * Creates a {@link FormControl} instance from a domain model and binds it
  * to a form control element.
  *
  * The {@link FormControl} instance will track the value, user interaction, and
@@ -54,8 +56,6 @@ const resolvedPromise = Promise.resolve(null);
  * within a parent form, the directive will also register itself with the form as a child
  * control.
  *
- * @description
- *
  * This directive can be used by itself or as part of a larger form. All you need is the
  * `ngModel` selector to activate it.
  *

packages/forms/src/directives/ng_model_group.ts

@@ -21,10 +21,10 @@ export const modelGroupProvider: any = {
 };
 
 /**
- * @whatItDoes Creates and binds a {@link FormGroup} instance to a DOM element.
- *
  * @description
  *
+ * Creates and binds a {@link FormGroup} instance to a DOM element.
+ *
  * This directive can only be used as a child of {@link NgForm} (or in other words,
  * within `<form>` tags).
  *

packages/forms/src/directives/ng_no_validate_directive.ts

@@ -9,7 +9,9 @@
 import {Directive} from '@angular/core';
 
 /**
- * @whatItDoes Adds `novalidate` attribute to all forms by default.
+ * @description
+ *
+ * Adds `novalidate` attribute to all forms by default.
  *
  * `novalidate` is used to disable browser's native form validation.
  *

packages/forms/src/directives/radio_control_value_accessor.ts

@@ -55,13 +55,13 @@ export class RadioControlRegistry {
 }
 
 /**
- * @whatItDoes  Writes radio control values and listens to radio control changes.
+ * @description
+ *
+ * Writes radio control values and listens to radio control changes.
  *
  * Used by {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName}
  * to keep the view synced with the {@link FormControl} model.
  *
- * @description
- *
  * If you have imported the {@link FormsModule} or the {@link ReactiveFormsModule}, this
  * value accessor will be active on any radio control that has a form directive. You do
  * **not** need to add a special selector to activate it.

packages/forms/src/directives/reactive_directives/form_control_directive.ts

@@ -29,15 +29,15 @@ export const formControlBinding: any = {
 };
 
 /**
- * @whatItDoes Syncs a standalone {@link FormControl} instance to a form control element.
+ * @description
  *
- * In other words, this directive ensures that any values written to the {@link FormControl}
+ * Syncs a standalone {@link FormControl} instance to a form control element.
+ *
+ * This directive ensures that any values written to the {@link FormControl}
  * instance programmatically will be written to the DOM element (model -> view). Conversely,
  * any values written to the DOM element through user input will be reflected in the
  * {@link FormControl} instance (view -> model).
  *
- * @description
- *
  * Use this directive if you'd like to create and manage a {@link FormControl} instance directly.
  * Simply create a {@link FormControl}, save it to your component class, and pass it into the
  * {@link FormControlDirective}.

packages/forms/src/directives/reactive_directives/form_control_name.ts

@@ -28,16 +28,16 @@ export const controlNameBinding: any = {
 };
 
 /**
- * @whatItDoes  Syncs a {@link FormControl} in an existing {@link FormGroup} to a form control
+ * @description
+ *
+ * Syncs a {@link FormControl} in an existing {@link FormGroup} to a form control
  * element by name.
  *
- * In other words, this directive ensures that any values written to the {@link FormControl}
+ * This directive ensures that any values written to the {@link FormControl}
  * instance programmatically will be written to the DOM element (model -> view). Conversely,
  * any values written to the DOM element through user input will be reflected in the
  * {@link FormControl} instance (view -> model).
  *
- * @description
- *
  * This directive is designed to be used with a parent {@link FormGroupDirective} (selector:
  * `[formGroup]`).
  *

packages/forms/src/directives/reactive_directives/form_group_directive.ts

@@ -23,10 +23,10 @@ export const formDirectiveProvider: any = {
 };
 
 /**
- * @whatItDoes Binds an existing {@link FormGroup} to a DOM element.
- *
  * @description
  *
+ * Binds an existing {@link FormGroup} to a DOM element.
+ *
  * This directive accepts an existing {@link FormGroup} instance. It will then use this
  * {@link FormGroup} instance to match any child {@link FormControl}, {@link FormGroup},
  * and {@link FormArray} instances to child {@link FormControlName}, {@link FormGroupName},

packages/forms/src/directives/reactive_directives/form_group_name.ts

@@ -24,10 +24,10 @@ export const formGroupNameProvider: any = {
 };
 
 /**
- * @whatItDoes Syncs a nested {@link FormGroup} to a DOM element.
- *
  * @description
  *
+ * Syncs a nested {@link FormGroup} to a DOM element.
+ *
  * This directive can only be used with a parent {@link FormGroupDirective} (selector:
  * `[formGroup]`).
  *
@@ -95,10 +95,10 @@ export const formArrayNameProvider: any = {
 };
 
 /**
- * @whatItDoes Syncs a nested {@link FormArray} to a DOM element.
- *
  * @description
  *
+ * Syncs a nested {@link FormArray} to a DOM element.
+ *
  * This directive is designed to be used with a parent {@link FormGroupDirective} (selector:
  * `[formGroup]`).
  *

packages/forms/src/directives/select_control_value_accessor.ts

@@ -27,13 +27,13 @@ function _extractId(valueString: string): string {
 }
 
 /**
- * @whatItDoes Writes values and listens to changes on a select element.
+ * @description
+ *
+ * Writes values and listens to changes on a select element.
  *
  * Used by {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName}
  * to keep the view synced with the {@link FormControl} model.
  *
- * @description
- *
  * If you have imported the {@link FormsModule} or the {@link ReactiveFormsModule}, this
  * value accessor will be active on any select control that has a form directive. You do
  * **not** need to add a special selector to activate it.
@@ -158,10 +158,10 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
 }
 
 /**
- * @whatItDoes Marks `<option>` as dynamic, so Angular can be notified when options change.
- *
  * @description
  *
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
+ *
  * See docs for {@link SelectControlValueAccessor} for usage examples.
  *
  * @stable