/** * @license * Copyright Google LLC 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, forwardRef, Renderer2} from '@angular/core'; import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; export const CHECKBOX_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxControlValueAccessor), multi: true, }; /** * @description * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input * element. * * @usageNotes * * ### Using a checkbox with a reactive form. * * The following example shows how to use a checkbox with a reactive form. * * ```ts * const rememberLoginControl = new FormControl(); * ``` * * ``` * * ``` * * @ngModule ReactiveFormsModule * @ngModule FormsModule * @publicApi */ @Directive({ selector: 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]', host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'}, providers: [CHECKBOX_VALUE_ACCESSOR] }) export class CheckboxControlValueAccessor extends BuiltInControlValueAccessor implements ControlValueAccessor { /** * The registered callback function called when a change event occurs on the input element. * @nodoc */ onChange = (_: any) => {}; /** * The registered callback function called when a blur event occurs on the input element. * @nodoc */ onTouched = () => {}; constructor(private _renderer: Renderer2, private _elementRef: ElementRef) { super(); } /** * Sets the "checked" property on the input element. * @nodoc */ writeValue(value: any): void { this._renderer.setProperty(this._elementRef.nativeElement, 'checked', value); } /** * Registers a function called when the control value changes. * @nodoc */ registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; } /** * Registers a function called when the control is touched. * @nodoc */ registerOnTouched(fn: () => {}): void { this.onTouched = fn; } /** * Sets the "disabled" property on the input element. * @nodoc */ setDisabledState(isDisabled: boolean): void { this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled); } }