diff --git a/goldens/public-api/forms/index.md b/goldens/public-api/forms/index.md index b6ba82362ee378..c13286e607bd61 100644 --- a/goldens/public-api/forms/index.md +++ b/goldens/public-api/forms/index.md @@ -198,7 +198,7 @@ export class DefaultValueAccessor extends BaseControlValueAccessor implements Co constructor(renderer: Renderer2, elementRef: ElementRef, _compositionMode: boolean); writeValue(value: any): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/packages/forms/src/directives.ts b/packages/forms/src/directives.ts index 59cfa802dc815a..b617e77c3f1122 100644 --- a/packages/forms/src/directives.ts +++ b/packages/forms/src/directives.ts @@ -45,11 +45,10 @@ export {NgSelectOption, SelectControlValueAccessor} from './directives/select_co export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor'; export {CALL_SET_DISABLED_STATE} from './directives/shared'; -export const SHARED_FORM_DIRECTIVES: Type[] = [ +const SHARED_FORM_DIRECTIVES: Type[] = [ NgNoValidate, NgSelectOption, NgSelectMultipleOption, - DefaultValueAccessor, NumberValueAccessor, RangeValueAccessor, CheckboxControlValueAccessor, @@ -78,8 +77,8 @@ export const REACTIVE_DRIVEN_DIRECTIVES: Type[] = */ @NgModule({ declarations: SHARED_FORM_DIRECTIVES, - imports: [RadioControlRegistryModule], - exports: SHARED_FORM_DIRECTIVES, + imports: [RadioControlRegistryModule, DefaultValueAccessor], + exports: [...SHARED_FORM_DIRECTIVES, DefaultValueAccessor], }) export class ɵInternalFormsSharedModule { } diff --git a/packages/forms/src/directives/default_value_accessor.ts b/packages/forms/src/directives/default_value_accessor.ts index 2c0fc9f132e8bf..4048c435746e4c 100644 --- a/packages/forms/src/directives/default_value_accessor.ts +++ b/packages/forms/src/directives/default_value_accessor.ts @@ -81,7 +81,8 @@ export const COMPOSITION_BUFFER_MODE = new InjectionToken('CompositionE '(compositionstart)': '$any(this)._compositionStart()', '(compositionend)': '$any(this)._compositionEnd($event.target.value)' }, - providers: [DEFAULT_VALUE_ACCESSOR] + providers: [DEFAULT_VALUE_ACCESSOR], + standalone: true, }) export class DefaultValueAccessor extends BaseControlValueAccessor implements ControlValueAccessor { /** Whether the user is creating a composition string (IME events). */ diff --git a/packages/forms/test/directives_spec.ts b/packages/forms/test/directives_spec.ts index 39897599e5db26..04b59a3bc2a465 100644 --- a/packages/forms/test/directives_spec.ts +++ b/packages/forms/test/directives_spec.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {SimpleChange} from '@angular/core'; -import {fakeAsync, flushMicrotasks, tick} from '@angular/core/testing'; +import {Component, SimpleChange} from '@angular/core'; +import {fakeAsync, flushMicrotasks, TestBed, tick} from '@angular/core/testing'; import {AbstractControl, CheckboxControlValueAccessor, ControlValueAccessor, DefaultValueAccessor, FormArray, FormArrayName, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, NgControl, NgForm, NgModel, NgModelGroup, SelectControlValueAccessor, SelectMultipleControlValueAccessor, ValidationErrors, Validator, Validators} from '@angular/forms'; import {selectValueAccessor} from '@angular/forms/src/directives/shared'; import {composeValidators} from '@angular/forms/src/validators'; @@ -39,6 +39,23 @@ class CustomValidatorDirective implements Validator { defaultAccessor = new DefaultValueAccessor(null!, null!, null!); }); + describe('DefaultValueAccessor', () => { + it('DefaultValueAccessor should be available as a standalone directive', () => { + @Component({ + selector: 'test-component', + hostDirectives: [DefaultValueAccessor], + template: ``, + }) + class TestComponent { + } + + const fixture = TestBed.createComponent(TestComponent); + fixture.detectChanges(); + + expect(fixture.componentInstance).toBeTruthy(); + }); + }) + describe('shared', () => { describe('selectValueAccessor', () => { let dir: NgControl;