[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);
  }
}

 

The writeValue function allows you to update your internal model with incoming values, for example if you use ngModel to bind your control to data.

The registerOnChange accepts a callback function which you can call when changes happen so that you can notify the outside world that the data model has changed. Note that you call it with the changed data model value.

The registerOnTouched function accepts a callback function which you can call when you want to set your control to touched. This is then managed by Angular 2 by adding the correct touched state and classes to the actual element tag in the DOM.

 

Using it:

    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>

 

Here in the code we set the default value to be true thought "writeValue" method handle by angular2, also we get updated value from the component thought "registonChange" method.

 

Link: http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

Github: https://github.com/kara/ac-forms/tree/master/src/app/switch-control