afirdousi

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AbstractValueAccessor, MakeProvider } from 'src/abstract-value-accessor';

@Component({
  selector: 'custom-range',
  template:` 
    <div class="custom-range">
      {{ label }}
      <input type="range" min=0 max=500 [(ngModel)]="current" 

afirdousi

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AbstractValueAccessor, MakeProvider } from 'src/abstract-value-accessor';

@Component({
  selector: 'custom-input',
  template:` 
    <div class="custom-input">
      {{ label }}
      <input type="text" (input)="onChange($event.target.value)"  />

afirdousi

export abstract class AbstractValueAccessor implements ControlValueAccessor {

    _value: any = '';
    get value(): any { return this._value; };
    set value(v: any) {
      if (v !== this._value) {
        this._value = v;
        this.onChange(v);
      }
    }

afirdousi

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

const customValueProvider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomRange),
    multi: true
};

@Component({

afirdousi

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

const customValueProvider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInput),
    multi: true
};

@Component({

afirdousi

<form [formGroup]="basicForm" novalidate>
          <custom-input [label]="'Name:'" formControlName="name" [(ngModel)]="customInputVal" ></custom-input>
          <custom-range [label]="'IQ Level:'" formControlName="iq" ></custom-range> 
          <input type="checkbox"  formControlName="interested" /> Interested in Angular?
</form>
<hr>  
Value from Custom Input via ngModel : {{ customInputVal }} <br/>
Value from Custom Input via Form Control Collection : {{ basicForm.controls.name.value  }}  <br/>
Value from Custom Range via Form Control Collection : {{ basicForm.controls.iq.value  }}  <br/>
Value from checkbox : {{ basicForm.controls.interested.value  }} <br/>

afirdousi

 this.basicForm = new FormGroup ({
                                  name: new FormControl(''),
                                  iq: new FormControl(100),
                                  interested: new FormControl(false)
                          });  

afirdousi

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const customValueProvider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInput),
    multi: true
};

@Component({
 <!-- Skipping other stuff for brevity -->

afirdousi

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

const customValueProvider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInput),
    multi: true
};

@Component({

afirdousi

registerOnChange(fn) {
    console.log(fn);
}