diff --git a/goldens/public-api/forms/forms.d.ts b/goldens/public-api/forms/forms.d.ts index aed8763bb8..9a5238297e 100644 --- a/goldens/public-api/forms/forms.d.ts +++ b/goldens/public-api/forms/forms.d.ts @@ -112,7 +112,7 @@ export declare interface AsyncValidatorFn { (control: AbstractControl): Promise | Observable; } -export declare class CheckboxControlValueAccessor implements ControlValueAccessor { +export declare class CheckboxControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor { onChange: (_: any) => void; onTouched: () => void; constructor(_renderer: Renderer2, _elementRef: ElementRef); @@ -382,11 +382,11 @@ export declare abstract class NgControl extends AbstractControlDirective { abstract viewToModelUpdate(newValue: any): void; } -export declare class NgControlStatus extends ɵangular_packages_forms_forms_g { +export declare class NgControlStatus extends ɵangular_packages_forms_forms_h { constructor(cd: NgControl); } -export declare class NgControlStatusGroup extends ɵangular_packages_forms_forms_g { +export declare class NgControlStatusGroup extends ɵangular_packages_forms_forms_h { constructor(cd: ControlContainer); } @@ -454,7 +454,7 @@ export declare class NgSelectOption implements OnDestroy { ngOnDestroy(): void; } -export declare class NumberValueAccessor implements ControlValueAccessor { +export declare class NumberValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor { onChange: (_: any) => void; onTouched: () => void; constructor(_renderer: Renderer2, _elementRef: ElementRef); @@ -471,13 +471,13 @@ export declare class PatternValidator implements Validator, OnChanges { validate(control: AbstractControl): ValidationErrors | null; } -export declare class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit { +export declare class RadioControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor, OnDestroy, OnInit { formControlName: string; name: string; onChange: () => void; onTouched: () => void; value: any; - constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_n, _injector: Injector); + constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_o, _injector: Injector); fireUncheck(value: any): void; ngOnDestroy(): void; ngOnInit(): void; @@ -487,7 +487,7 @@ export declare class RadioControlValueAccessor implements ControlValueAccessor, writeValue(value: any): void; } -export declare class RangeValueAccessor implements ControlValueAccessor { +export declare class RangeValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor { onChange: (_: any) => void; onTouched: () => void; constructor(_renderer: Renderer2, _elementRef: ElementRef); @@ -509,7 +509,7 @@ export declare class RequiredValidator implements Validator { validate(control: AbstractControl): ValidationErrors | null; } -export declare class SelectControlValueAccessor implements ControlValueAccessor { +export declare class SelectControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor { set compareWith(fn: (o1: any, o2: any) => boolean); onChange: (_: any) => void; onTouched: () => void; @@ -521,7 +521,7 @@ export declare class SelectControlValueAccessor implements ControlValueAccessor writeValue(value: any): void; } -export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor { +export declare class SelectMultipleControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor { set compareWith(fn: (o1: any, o2: any) => boolean); onChange: (_: any) => void; onTouched: () => void; diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json index 42d259c003..3ce92ef0dd 100644 --- a/goldens/size-tracking/integration-payloads.json +++ b/goldens/size-tracking/integration-payloads.json @@ -59,7 +59,7 @@ "master": { "uncompressed": { "runtime-es2015": 1485, - "main-es2015": 168534, + "main-es2015": 162346, "polyfills-es2015": 36975 } } diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json index bad7d9063a..1ad3f2401c 100644 --- a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json +++ b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json @@ -44,9 +44,6 @@ { "name": "BROWSER_MODULE_PROVIDERS" }, - { - "name": "BUILTIN_ACCESSORS" - }, { "name": "BrowserDomAdapter" }, @@ -56,6 +53,9 @@ { "name": "BrowserModule" }, + { + "name": "BuiltInControlValueAccessor" + }, { "name": "CHECKBOX_VALUE_ACCESSOR" }, @@ -368,9 +368,6 @@ { "name": "NULL_INJECTOR" }, - { - "name": "NUMBER_VALUE_ACCESSOR" - }, { "name": "NgControl" }, @@ -419,9 +416,6 @@ { "name": "NullInjector" }, - { - "name": "NumberValueAccessor" - }, { "name": "ObjectUnsubscribedError" }, @@ -455,21 +449,9 @@ { "name": "R3ViewContainerRef" }, - { - "name": "RADIO_VALUE_ACCESSOR" - }, - { - "name": "RANGE_VALUE_ACCESSOR" - }, { "name": "RadioControlRegistry" }, - { - "name": "RadioControlValueAccessor" - }, - { - "name": "RangeValueAccessor" - }, { "name": "ReactiveFormsComponent" }, @@ -509,12 +491,6 @@ { "name": "SCHEDULER" }, - { - "name": "SELECT_MULTIPLE_VALUE_ACCESSOR" - }, - { - "name": "SELECT_VALUE_ACCESSOR" - }, { "name": "SERVER_TRANSITION_PROVIDERS" }, @@ -536,12 +512,6 @@ { "name": "Sanitizer" }, - { - "name": "SelectControlValueAccessor" - }, - { - "name": "SelectMultipleControlValueAccessor" - }, { "name": "ShadowDomRenderer" }, diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json index 39c77b5574..decbbcc8e2 100644 --- a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json +++ b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json @@ -44,9 +44,6 @@ { "name": "BROWSER_MODULE_PROVIDERS" }, - { - "name": "BUILTIN_ACCESSORS" - }, { "name": "BrowserDomAdapter" }, @@ -56,6 +53,9 @@ { "name": "BrowserModule" }, + { + "name": "BuiltInControlValueAccessor" + }, { "name": "CHECKBOX_VALUE_ACCESSOR" }, @@ -353,9 +353,6 @@ { "name": "NULL_INJECTOR" }, - { - "name": "NUMBER_VALUE_ACCESSOR" - }, { "name": "NgControl" }, @@ -413,9 +410,6 @@ { "name": "NullInjector" }, - { - "name": "NumberValueAccessor" - }, { "name": "ObjectUnsubscribedError" }, @@ -449,24 +443,12 @@ { "name": "R3ViewContainerRef" }, - { - "name": "RADIO_VALUE_ACCESSOR" - }, - { - "name": "RANGE_VALUE_ACCESSOR" - }, { "name": "REQUIRED_VALIDATOR" }, { "name": "RadioControlRegistry" }, - { - "name": "RadioControlValueAccessor" - }, - { - "name": "RangeValueAccessor" - }, { "name": "RecordViewTuple" }, @@ -500,12 +482,6 @@ { "name": "SCHEDULER" }, - { - "name": "SELECT_MULTIPLE_VALUE_ACCESSOR" - }, - { - "name": "SELECT_VALUE_ACCESSOR" - }, { "name": "SERVER_TRANSITION_PROVIDERS" }, @@ -527,12 +503,6 @@ { "name": "Sanitizer" }, - { - "name": "SelectControlValueAccessor" - }, - { - "name": "SelectMultipleControlValueAccessor" - }, { "name": "ShadowDomRenderer" }, diff --git a/packages/forms/src/directives/checkbox_value_accessor.ts b/packages/forms/src/directives/checkbox_value_accessor.ts index 2ef8261a05..c2d97e19c8 100644 --- a/packages/forms/src/directives/checkbox_value_accessor.ts +++ b/packages/forms/src/directives/checkbox_value_accessor.ts @@ -8,7 +8,7 @@ import {Directive, ElementRef, forwardRef, Renderer2} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; export const CHECKBOX_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -45,7 +45,8 @@ export const CHECKBOX_VALUE_ACCESSOR: any = { host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'}, providers: [CHECKBOX_VALUE_ACCESSOR] }) -export class CheckboxControlValueAccessor implements ControlValueAccessor { +export class CheckboxControlValueAccessor extends BuiltInControlValueAccessor implements + ControlValueAccessor { /** * The registered callback function called when a change event occurs on the input element. * @nodoc @@ -58,7 +59,9 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor { */ onTouched = () => {}; - constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {} + constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { + super(); + } /** * Sets the "checked" property on the input element. diff --git a/packages/forms/src/directives/control_value_accessor.ts b/packages/forms/src/directives/control_value_accessor.ts index 5e169ca39e..9c150ee2ea 100644 --- a/packages/forms/src/directives/control_value_accessor.ts +++ b/packages/forms/src/directives/control_value_accessor.ts @@ -131,6 +131,15 @@ export interface ControlValueAccessor { setDisabledState?(isDisabled: boolean): void; } +/** + * Base class for all built-in ControlValueAccessor classes. We use this class to distinguish + * between built-in and custom CVAs, so that Forms logic can recognize built-in CVAs and treat + * custom ones with higher priority (when both built-in and custom CVAs are present). + * Note: this is an *internal-only* class and should not be extended or used directly in + * applications code. + */ +export class BuiltInControlValueAccessor {} + /** * Used to provide a `ControlValueAccessor` for form controls. * @@ -139,4 +148,4 @@ export interface ControlValueAccessor { * @publicApi */ export const NG_VALUE_ACCESSOR = - new InjectionToken>('NgValueAccessor'); + new InjectionToken>('NgValueAccessor'); \ No newline at end of file diff --git a/packages/forms/src/directives/number_value_accessor.ts b/packages/forms/src/directives/number_value_accessor.ts index da4a0dc5d0..a90eda5d8f 100644 --- a/packages/forms/src/directives/number_value_accessor.ts +++ b/packages/forms/src/directives/number_value_accessor.ts @@ -8,7 +8,7 @@ import {Directive, ElementRef, forwardRef, Renderer2} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; export const NUMBER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -46,7 +46,8 @@ export const NUMBER_VALUE_ACCESSOR: any = { host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, providers: [NUMBER_VALUE_ACCESSOR] }) -export class NumberValueAccessor implements ControlValueAccessor { +export class NumberValueAccessor extends BuiltInControlValueAccessor implements + ControlValueAccessor { /** * The registered callback function called when a change or input event occurs on the input * element. @@ -60,7 +61,9 @@ export class NumberValueAccessor implements ControlValueAccessor { */ onTouched = () => {}; - constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {} + constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { + super(); + } /** * Sets the "value" property on the input element. diff --git a/packages/forms/src/directives/radio_control_value_accessor.ts b/packages/forms/src/directives/radio_control_value_accessor.ts index 50b92ae423..0accb9292a 100644 --- a/packages/forms/src/directives/radio_control_value_accessor.ts +++ b/packages/forms/src/directives/radio_control_value_accessor.ts @@ -8,7 +8,7 @@ import {Directive, ElementRef, forwardRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer2} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; import {NgControl} from './ng_control'; export const RADIO_VALUE_ACCESSOR: any = { @@ -100,7 +100,8 @@ export class RadioControlRegistry { host: {'(change)': 'onChange()', '(blur)': 'onTouched()'}, providers: [RADIO_VALUE_ACCESSOR] }) -export class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit { +export class RadioControlValueAccessor extends BuiltInControlValueAccessor implements + ControlValueAccessor, OnDestroy, OnInit { /** @internal */ // TODO(issue/24571): remove '!'. _state!: boolean; @@ -146,7 +147,9 @@ export class RadioControlValueAccessor implements ControlValueAccessor, OnDestro constructor( private _renderer: Renderer2, private _elementRef: ElementRef, - private _registry: RadioControlRegistry, private _injector: Injector) {} + private _registry: RadioControlRegistry, private _injector: Injector) { + super(); + } /** @nodoc */ ngOnInit(): void { diff --git a/packages/forms/src/directives/range_value_accessor.ts b/packages/forms/src/directives/range_value_accessor.ts index 312657361c..8cd487b1b5 100644 --- a/packages/forms/src/directives/range_value_accessor.ts +++ b/packages/forms/src/directives/range_value_accessor.ts @@ -8,7 +8,7 @@ import {Directive, ElementRef, forwardRef, Renderer2, StaticProvider} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; export const RANGE_VALUE_ACCESSOR: StaticProvider = { provide: NG_VALUE_ACCESSOR, @@ -50,7 +50,8 @@ export const RANGE_VALUE_ACCESSOR: StaticProvider = { }, providers: [RANGE_VALUE_ACCESSOR] }) -export class RangeValueAccessor implements ControlValueAccessor { +export class RangeValueAccessor extends BuiltInControlValueAccessor implements + ControlValueAccessor { /** * The registered callback function called when a change or input event occurs on the input * element. @@ -64,7 +65,9 @@ export class RangeValueAccessor implements ControlValueAccessor { */ onTouched = () => {}; - constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {} + constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { + super(); + } /** * Sets the "value" property on the input element. diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts index 7bad43e935..d1c23eb1f4 100644 --- a/packages/forms/src/directives/select_control_value_accessor.ts +++ b/packages/forms/src/directives/select_control_value_accessor.ts @@ -8,7 +8,7 @@ import {Directive, ElementRef, forwardRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; export const SELECT_VALUE_ACCESSOR: StaticProvider = { provide: NG_VALUE_ACCESSOR, @@ -88,7 +88,8 @@ function _extractId(valueString: string): string { host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, providers: [SELECT_VALUE_ACCESSOR] }) -export class SelectControlValueAccessor implements ControlValueAccessor { +export class SelectControlValueAccessor extends BuiltInControlValueAccessor implements + ControlValueAccessor { /** @nodoc */ value: any; @@ -125,7 +126,9 @@ export class SelectControlValueAccessor implements ControlValueAccessor { private _compareWith: (o1: any, o2: any) => boolean = Object.is; - constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {} + constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { + super(); + } /** * Sets the "value" property on the input element. The "selectedIndex" diff --git a/packages/forms/src/directives/select_multiple_control_value_accessor.ts b/packages/forms/src/directives/select_multiple_control_value_accessor.ts index 5ebf8e7d6a..1af649c777 100644 --- a/packages/forms/src/directives/select_multiple_control_value_accessor.ts +++ b/packages/forms/src/directives/select_multiple_control_value_accessor.ts @@ -8,7 +8,7 @@ import {Directive, ElementRef, forwardRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; export const SELECT_MULTIPLE_VALUE_ACCESSOR: StaticProvider = { provide: NG_VALUE_ACCESSOR, @@ -81,7 +81,8 @@ abstract class HTMLCollection { host: {'(change)': 'onChange($event.target)', '(blur)': 'onTouched()'}, providers: [SELECT_MULTIPLE_VALUE_ACCESSOR] }) -export class SelectMultipleControlValueAccessor implements ControlValueAccessor { +export class SelectMultipleControlValueAccessor extends BuiltInControlValueAccessor implements + ControlValueAccessor { /** * The current value. * @nodoc @@ -121,7 +122,9 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor private _compareWith: (o1: any, o2: any) => boolean = Object.is; - constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {} + constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { + super(); + } /** * Sets the "value" property on one or of more of the select's options. diff --git a/packages/forms/src/directives/shared.ts b/packages/forms/src/directives/shared.ts index 17c0a1d75a..a2dbbe667d 100644 --- a/packages/forms/src/directives/shared.ts +++ b/packages/forms/src/directives/shared.ts @@ -11,18 +11,12 @@ import {getControlAsyncValidators, getControlValidators, mergeValidators} from ' import {AbstractControlDirective} from './abstract_control_directive'; import {AbstractFormGroupDirective} from './abstract_form_group_directive'; -import {CheckboxControlValueAccessor} from './checkbox_value_accessor'; import {ControlContainer} from './control_container'; -import {ControlValueAccessor} from './control_value_accessor'; +import {BuiltInControlValueAccessor, ControlValueAccessor} from './control_value_accessor'; import {DefaultValueAccessor} from './default_value_accessor'; import {NgControl} from './ng_control'; -import {NumberValueAccessor} from './number_value_accessor'; -import {RadioControlValueAccessor} from './radio_control_value_accessor'; -import {RangeValueAccessor} from './range_value_accessor'; import {FormArrayName} from './reactive_directives/form_group_name'; import {ReactiveErrors} from './reactive_errors'; -import {SelectControlValueAccessor} from './select_control_value_accessor'; -import {SelectMultipleControlValueAccessor} from './select_multiple_control_value_accessor'; import {AsyncValidatorFn, Validator, ValidatorFn} from './validators'; @@ -309,17 +303,10 @@ export function isPropertyUpdated(changes: {[key: string]: any}, viewModel: any) return !Object.is(viewModel, change.currentValue); } -const BUILTIN_ACCESSORS = [ - CheckboxControlValueAccessor, - RangeValueAccessor, - NumberValueAccessor, - SelectControlValueAccessor, - SelectMultipleControlValueAccessor, - RadioControlValueAccessor, -]; - export function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean { - return BUILTIN_ACCESSORS.some(a => valueAccessor.constructor === a); + // Check if a given value accessor is an instance of a class that directly extends + // `BuiltInControlValueAccessor` one. + return Object.getPrototypeOf(valueAccessor.constructor) === BuiltInControlValueAccessor; } export function syncPendingControls(form: FormGroup, directives: NgControl[]): void {