ssougnez

import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-on-off',
  templateUrl: './on-off.component.html',
  styleUrls: ['./on-off.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    'role': 'checkbox',

ssougnez

constructor(private _cdr: ChangeDetectorRef) { }

public switch(value: boolean) {
  if (value !== this.value && this.disabled === false) {
    this._value = value;

    this.change.emit(this.value);

    if (this.onChange) {
      this.onChange(this.value);

ssougnez

@Input()
public get value(): boolean { return this._value; }
public set value(obj: boolean) {
  this.switch(obj);
}

ssougnez

private _value: boolean = false;

ssougnez

this.form = this._fb.group({
  [Fields.Enabled]: [{ value: true, disabled: true }]
});

ssougnez

<form [formGroup]="form">
    <app-on-off [formControlName]="Fields.Enabled"></app-on-off>
</form>

<pre>{{ form.value | json }}</pre>

ssougnez

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

enum Fields {
  Enabled = "enabled"
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',

ssougnez

'(blur)': 'onTouched && onTouched()'

ssougnez

public onTouched: () => void;

public registerOnTouched(fn: any): void {
  this.onTouched = fn;
}

ssougnez

public switch(value: boolean) {
  if (value !== this.value && this.disabled === false) {
    this.value = value;

    this.change.emit(this.value);

    if (this.onChange) {
      this.onChange(this.value);
    }
  }