diff --git a/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts b/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts index c2fcb03aac..7615fc57da 100644 --- a/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts +++ b/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts @@ -44,6 +44,8 @@ abstract class HTMLCollection { /** * The accessor for writing a value and listening to changes on a select element. + * + * @experimental */ @Directive({ selector: diff --git a/modules/@angular/forms/src/forms.ts b/modules/@angular/forms/src/forms.ts index c377402742..1e170def6d 100644 --- a/modules/@angular/forms/src/forms.ts +++ b/modules/@angular/forms/src/forms.ts @@ -39,6 +39,7 @@ export {FormControlName} from './directives/reactive_directives/form_control_nam export {FormGroupDirective} from './directives/reactive_directives/form_group_directive'; export {FormGroupName} from './directives/reactive_directives/form_group_name'; export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor'; +export {SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor'; export {AsyncValidatorFn, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator, ValidatorFn} from './directives/validators'; export {FormBuilder} from './form_builder'; export {AbstractControl, FormArray, FormControl, FormGroup} from './model'; diff --git a/modules/@angular/forms/test/directives_spec.ts b/modules/@angular/forms/test/directives_spec.ts index 849dd199aa..1d4dc8edf1 100644 --- a/modules/@angular/forms/test/directives_spec.ts +++ b/modules/@angular/forms/test/directives_spec.ts @@ -12,7 +12,7 @@ import {fakeAsync, flushMicrotasks, tick,} from '@angular/core/testing'; import {SpyNgControl, SpyValueAccessor} from './spies'; -import {FormGroup, FormControl, FormArray, FormArrayName, FormControlName, FormGroupName, NgModelGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/forms'; +import {FormGroup, FormControl, FormArray, FormArrayName, FormControlName, FormGroupName, NgModelGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor, Validator} from '@angular/forms'; import {selectValueAccessor, composeValidators} from '@angular/forms/src/directives/shared'; import {TimerWrapper} from '../src/facade/async'; @@ -77,6 +77,13 @@ export function main() { ])).toEqual(selectAccessor); }); + it('should return select multiple accessor when provided', () => { + const selectMultipleAccessor = new SelectMultipleControlValueAccessor(); + expect(selectValueAccessor(dir, [ + defaultAccessor, selectMultipleAccessor + ])).toEqual(selectMultipleAccessor); + }); + it('should throw when more than one build-in accessor is provided', () => { var checkboxAccessor = new CheckboxControlValueAccessor(null, null); var selectAccessor = new SelectControlValueAccessor(null, null); @@ -90,6 +97,14 @@ export function main() { .toEqual(customAccessor); }); + it('should return custom accessor when provided with select multiple', () => { + const customAccessor = new SpyValueAccessor(); + const selectMultipleAccessor = new SelectMultipleControlValueAccessor(); + expect(selectValueAccessor( + dir, [defaultAccessor, customAccessor, selectMultipleAccessor])) + .toEqual(customAccessor); + }); + it('should throw when more than one custom accessor is provided', () => { var customAccessor: ControlValueAccessor = new SpyValueAccessor(); expect(() => selectValueAccessor(dir, [customAccessor, customAccessor])).toThrowError(); diff --git a/tools/public_api_guard/forms/index.d.ts b/tools/public_api_guard/forms/index.d.ts index 36ff9f76ce..06828ccc20 100644 --- a/tools/public_api_guard/forms/index.d.ts +++ b/tools/public_api_guard/forms/index.d.ts @@ -376,6 +376,17 @@ export declare class SelectControlValueAccessor implements ControlValueAccessor writeValue(value: any): void; } +/** @experimental */ +export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor { + onChange: (_: any) => void; + onTouched: () => void; + value: any; + constructor(); + registerOnChange(fn: (value: any) => any): void; + registerOnTouched(fn: () => any): void; + writeValue(value: any): void; +} + /** @experimental */ export interface Validator { validate(c: AbstractControl): {