ac157170c8
@angular/forms declares several directives and a module which are not exported from the package via the entrypoint, either intentionally or as a historical accident. Ivy's locality principle necessitates that directives used in user code be importable from the package which defines them. This requires these forms directives to be exported. Several directives which define ControlValueAccessors are exported: * NumberValueAccessor * RangeValueAccessor A few more directives and a module are exported privately (with a ɵ prefix): * NgNoValidate * NgSelectMultipleOption * InternalFormsSharedModule PR Close #27743
105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {Directive, ElementRef, Renderer2, StaticProvider, forwardRef} from '@angular/core';
|
|
|
|
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
|
|
|
|
export const RANGE_VALUE_ACCESSOR: StaticProvider = {
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: forwardRef(() => RangeValueAccessor),
|
|
multi: true
|
|
};
|
|
|
|
/**
|
|
* @description
|
|
* The `ControlValueAccessor` for writing a range value and listening to range input changes.
|
|
* The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
|
|
* directives.
|
|
*
|
|
* @usageNotes
|
|
*
|
|
* ### Using a range input with a reactive form
|
|
*
|
|
* The following example shows how to use a range input with a reactive form.
|
|
*
|
|
* ```ts
|
|
* const ageControl = new FormControl();
|
|
* ```
|
|
*
|
|
* ```
|
|
* <input type="range" [formControl]="ageControl">
|
|
* ```
|
|
*
|
|
* @ngModule ReactiveFormsModule
|
|
* @ngModule FormsModule
|
|
* @publicApi
|
|
*/
|
|
@Directive({
|
|
selector:
|
|
'input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]',
|
|
host: {
|
|
'(change)': 'onChange($event.target.value)',
|
|
'(input)': 'onChange($event.target.value)',
|
|
'(blur)': 'onTouched()'
|
|
},
|
|
providers: [RANGE_VALUE_ACCESSOR]
|
|
})
|
|
export class RangeValueAccessor implements ControlValueAccessor {
|
|
/**
|
|
* @description
|
|
* The registered callback function called when a change or input event occurs on the input
|
|
* element.
|
|
*/
|
|
onChange = (_: any) => {};
|
|
|
|
/**
|
|
* @description
|
|
* The registered callback function called when a blur event occurs on the input element.
|
|
*/
|
|
onTouched = () => {};
|
|
|
|
constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
|
|
|
|
/**
|
|
* Sets the "value" property on the input element.
|
|
*
|
|
* @param value The checked value
|
|
*/
|
|
writeValue(value: any): void {
|
|
this._renderer.setProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
|
|
}
|
|
|
|
/**
|
|
* @description
|
|
* Registers a function called when the control value changes.
|
|
*
|
|
* @param fn The callback function
|
|
*/
|
|
registerOnChange(fn: (_: number|null) => void): void {
|
|
this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
|
|
}
|
|
|
|
/**
|
|
* @description
|
|
* Registers a function called when the control is touched.
|
|
*
|
|
* @param fn The callback function
|
|
*/
|
|
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
|
|
|
|
/**
|
|
* Sets the "disabled" property on the range input element.
|
|
*
|
|
* @param isDisabled The disabled value
|
|
*/
|
|
setDisabledState(isDisabled: boolean): void {
|
|
this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
|
|
}
|
|
}
|