From 7d39bc68fbb296c1fad7a8683ffb2d7fb6d3f247 Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Thu, 20 Sep 2018 15:18:14 +0100 Subject: [PATCH] docs(forms): move extended text to @usageNotes (#26039) Headings are not allowed in the basic description block. PR Close #26039 --- .../src/directives/checkbox_value_accessor.ts | 10 +++-- .../src/directives/control_value_accessor.ts | 6 ++- .../src/directives/default_value_accessor.ts | 10 +++-- .../src/directives/number_value_accessor.ts | 11 +++-- .../radio_control_value_accessor.ts | 1 + .../src/directives/range_value_accessor.ts | 11 +++-- .../form_control_directive.ts | 2 + .../reactive_directives/form_control_name.ts | 2 + .../form_group_directive.ts | 1 + .../reactive_directives/form_group_name.ts | 2 + .../select_control_value_accessor.ts | 3 +- .../select_multiple_control_value_accessor.ts | 6 ++- packages/forms/src/directives/validators.ts | 45 +++++++++++-------- packages/forms/src/model.ts | 28 +++++++----- packages/forms/src/validators.ts | 14 +++--- tools/public_api_guard/forms/forms.d.ts | 22 ++++----- 16 files changed, 106 insertions(+), 68 deletions(-) diff --git a/packages/forms/src/directives/checkbox_value_accessor.ts b/packages/forms/src/directives/checkbox_value_accessor.ts index 6aeea5b98b..123364cf73 100644 --- a/packages/forms/src/directives/checkbox_value_accessor.ts +++ b/packages/forms/src/directives/checkbox_value_accessor.ts @@ -19,10 +19,12 @@ export const CHECKBOX_VALUE_ACCESSOR: any = { /** * The accessor for writing a value and listening to changes on a checkbox input element. * - * ### Example - * ``` - * - * ``` + * @usageNotes + * ### Example + * + * ``` + * + * ``` * * @ngModule FormsModule * @ngModule ReactiveFormsModule diff --git a/packages/forms/src/directives/control_value_accessor.ts b/packages/forms/src/directives/control_value_accessor.ts index aa90ecb045..c58dce5786 100644 --- a/packages/forms/src/directives/control_value_accessor.ts +++ b/packages/forms/src/directives/control_value_accessor.ts @@ -15,7 +15,7 @@ import {InjectionToken} from '@angular/core'; * * Implement this interface to create a custom form control directive * that integrates with Angular forms. - * + * * @see DefaultValueAccessor */ export interface ControlValueAccessor { @@ -26,6 +26,7 @@ export interface ControlValueAccessor { * This method is called by the forms API to write to the view when programmatic * changes from model to view are requested. * + * @usageNotes * ### Write a value to the element * * The following example writes a value to the native DOM element. @@ -51,6 +52,7 @@ export interface ControlValueAccessor { * When implementing the `registerOnChange` method in your own value accessor, * save the given function so your class calls it at the appropriate time. * + * @usageNotes * ### Store the change function * * The following example stores the provided function as an internal method. @@ -83,6 +85,7 @@ export interface ControlValueAccessor { * function so your class calls it when the control should be considered * blurred or "touched". * + * @usageNotes * ### Store the callback function * * The following example stores the provided function as an internal method. @@ -112,6 +115,7 @@ export interface ControlValueAccessor { * or from 'DISABLED'. Depending on the status, it enables or disables the * appropriate DOM element. * + * @usageNotes * The following is an example of writing the disabled property to a native DOM element: * * ```ts diff --git a/packages/forms/src/directives/default_value_accessor.ts b/packages/forms/src/directives/default_value_accessor.ts index 10da6ed93c..65a75ff60a 100644 --- a/packages/forms/src/directives/default_value_accessor.ts +++ b/packages/forms/src/directives/default_value_accessor.ts @@ -35,10 +35,12 @@ export const COMPOSITION_BUFFER_MODE = new InjectionToken('CompositionE * The default accessor for writing a value and listening to changes that is used by the * `NgModel`, `FormControlDirective`, and `FormControlName` directives. * - * ### Example - * ``` - * - * ``` + * @usageNotes + * ### Example + * + * ``` + * + * ``` * * @ngModule FormsModule * @ngModule ReactiveFormsModule diff --git a/packages/forms/src/directives/number_value_accessor.ts b/packages/forms/src/directives/number_value_accessor.ts index 4ed6d81cbc..741dfac573 100644 --- a/packages/forms/src/directives/number_value_accessor.ts +++ b/packages/forms/src/directives/number_value_accessor.ts @@ -20,10 +20,13 @@ export const NUMBER_VALUE_ACCESSOR: any = { * The accessor for writing a number value and listening to changes that is used by the * `NgModel`, `FormControlDirective`, and `FormControlName` directives. * - * ### Example - * ``` - * - * ``` + * @usageNotes + * ### Example + * + * ``` + * + * ``` + * * @ngModule FormsModule * @ngModule ReactiveFormsModule */ diff --git a/packages/forms/src/directives/radio_control_value_accessor.ts b/packages/forms/src/directives/radio_control_value_accessor.ts index 5346ee8c60..7db67cdada 100644 --- a/packages/forms/src/directives/radio_control_value_accessor.ts +++ b/packages/forms/src/directives/radio_control_value_accessor.ts @@ -66,6 +66,7 @@ export class RadioControlRegistry { * 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. * + * @usageNotes * ### How to use radio buttons with form directives * * To use radio buttons in a template-driven form, you'll want to ensure that radio buttons diff --git a/packages/forms/src/directives/range_value_accessor.ts b/packages/forms/src/directives/range_value_accessor.ts index 8c35fbb3f9..ba5d75758a 100644 --- a/packages/forms/src/directives/range_value_accessor.ts +++ b/packages/forms/src/directives/range_value_accessor.ts @@ -20,10 +20,13 @@ export const RANGE_VALUE_ACCESSOR: StaticProvider = { * The accessor for writing a range value and listening to changes that is used by the * `NgModel`, `FormControlDirective`, and `FormControlName` directives. * - * ### Example - * ``` - * - * ``` + * @usageNotes + * ### Example + * + * ``` + * + * ``` + * * @ngModule FormsModule * @ngModule ReactiveFormsModule */ diff --git a/packages/forms/src/directives/reactive_directives/form_control_directive.ts b/packages/forms/src/directives/reactive_directives/form_control_directive.ts index 01fba08c66..d2e2797df2 100644 --- a/packages/forms/src/directives/reactive_directives/form_control_directive.ts +++ b/packages/forms/src/directives/reactive_directives/form_control_directive.ts @@ -38,6 +38,7 @@ export const formControlBinding: any = { * any values written to the DOM element through user input will be reflected in the * `FormControl` instance (view -> model). * + * @usageNotes * Use this directive if you'd like to create and manage a `FormControl` instance directly. * Simply create a `FormControl`, save it to your component class, and pass it into the * `FormControlDirective`. @@ -70,6 +71,7 @@ export const formControlBinding: any = { * form directives has been deprecated in Angular v6 and will be removed in Angular v7. * * Now deprecated: + * * ```html * * ``` diff --git a/packages/forms/src/directives/reactive_directives/form_control_name.ts b/packages/forms/src/directives/reactive_directives/form_control_name.ts index 841b3b73d8..999b9b55cf 100644 --- a/packages/forms/src/directives/reactive_directives/form_control_name.ts +++ b/packages/forms/src/directives/reactive_directives/form_control_name.ts @@ -38,6 +38,7 @@ export const controlNameBinding: any = { * any values written to the DOM element through user input will be reflected in the * `FormControl` instance (view -> model). * + * @usageNotes * This directive is designed to be used with a parent `FormGroupDirective` (selector: * `[formGroup]`). * @@ -78,6 +79,7 @@ export const controlNameBinding: any = { * form directives has been deprecated in Angular v6 and will be removed in Angular v7. * * Now deprecated: + * * ```html *
* diff --git a/packages/forms/src/directives/reactive_directives/form_group_directive.ts b/packages/forms/src/directives/reactive_directives/form_group_directive.ts index a3879cd349..fe524d7fcc 100644 --- a/packages/forms/src/directives/reactive_directives/form_group_directive.ts +++ b/packages/forms/src/directives/reactive_directives/form_group_directive.ts @@ -32,6 +32,7 @@ export const formDirectiveProvider: any = { * and `FormArray` instances to child `FormControlName`, `FormGroupName`, * and `FormArrayName` directives. * + * @usageNotes * **Set value**: You can set the form's initial value when instantiating the * `FormGroup`, or you can set it programmatically later using the `FormGroup`'s * {@link AbstractControl#setValue setValue} or {@link AbstractControl#patchValue patchValue} diff --git a/packages/forms/src/directives/reactive_directives/form_group_name.ts b/packages/forms/src/directives/reactive_directives/form_group_name.ts index 86033634d9..2e2d4f394b 100644 --- a/packages/forms/src/directives/reactive_directives/form_group_name.ts +++ b/packages/forms/src/directives/reactive_directives/form_group_name.ts @@ -39,6 +39,7 @@ export const formGroupNameProvider: any = { * form separately from the rest or when you'd like to group the values of certain * controls into their own nested object. * + * @usageNotes * **Access the group**: You can access the associated `FormGroup` using the * {@link AbstractControl#get get} method. Ex: `this.form.get('name')`. * @@ -107,6 +108,7 @@ export const formArrayNameProvider: any = { * you're not sure how many there will be. Form arrays allow you to create new * form controls dynamically. * + * @usageNotes * **Access the array**: You can access the associated `FormArray` using the * {@link AbstractControl#get get} method on the parent `FormGroup`. * Ex: `this.form.get('cities')`. diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts index 7157a5c33a..9be4c1cb15 100644 --- a/packages/forms/src/directives/select_control_value_accessor.ts +++ b/packages/forms/src/directives/select_control_value_accessor.ts @@ -38,6 +38,7 @@ function _extractId(valueString: string): string { * 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. * + * @usageNotes * ### How to use select controls with form directives * * To use a select in a template-driven form, simply add an `ngModel` and a `name` @@ -66,7 +67,7 @@ function _extractId(valueString: string): string { * `compareWith` takes a **function** which has two arguments: `option1` and `option2`. * If `compareWith` is given, Angular selects option by the return value of the function. * - * #### Syntax + * ### Syntax * * ``` * @@ -169,6 +170,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor /** * Marks `