[Angular2 Form] Create custom form component using Control Value Accessor

//switch-control component 

import { Component } from ‘@angular/core‘;
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators} from ‘@angular/forms‘;

@Component({
  selector: ‘switch-control‘,
  templateUrl: ‘./switch-control.component.html‘,
  styleUrls: [‘./switch-control.component.css‘],
  providers: [
    {provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SwitchControlComponent}
  ]
})
export class SwitchControlComponent implements ControlValueAccessor {
  isOn: boolean;
  _onChange: (value: any) => void;

  writeValue(value: any) {
    this.isOn = !!value;
  }

  registerOnChange(fn: (value: any) => void) {
    this._onChange = fn;
  }

  registerOnTouched() {}

  toggle(isOn: boolean) {
    this.isOn = isOn;
    this._onChange(isOn);
  }
}

    this.signupForm = fb.group({
      password: [
        ‘‘,
        Validators.required
      ],
      confirm: [
        ‘‘,
        [
          Validators.required,
          confirmPasswords.bind(undefined, this.signup)
        ]
      ],
      newsletter: true
    });

<form novalidate autocomplete="off" [formGroup]="signupForm">
  <div class="form-field">
    <label>Password:</label>
    <input type="text" formControlName="password" [(ngModel)]="signup.password" name="password">
  </div>
  <div class="form-field">
    <label>Confirm Password: </label>
    <input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim">
    <div *ngIf="!signupForm.valid">
      <span *ngIf="signupForm.get(‘confirm‘).hasError(‘confirmPassword‘) && signupForm.get(‘confirm‘).touched">
        {{signupForm.get(‘confirm‘).errors?.confirmPassword.message}}
      </span>
      <span *ngIf="signupForm.get(‘confirm‘).hasError(‘required‘) && signupForm.get(‘confirm‘).dirty">This field is requred</span>
    </div>
    <switch-control formControlName="newsletter"></switch-control>
  </div>
</form>