ControlValueAccessor TwoWay Binding trong Angular 2+

 ControlValueAccessor TwoWay Binding

interface ControlValueAccessor {
  writeValue(obj: any): void;
  registerOnChange(fn: any): void;
  registerOnTouched(fn: any): void;
  setDisabledState?(isDisabled: boolean): void;
}

Step 1

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

Step 2

export const MY_APP_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => AppComponent),
  multi: true
};

Step 3

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MY_APP_VALUE_ACCESSOR]
})
export class AppComponent implements ControlValueAccessor {
}

Step 4

export class AppComponent implements ControlValueAccessor {

  value: string;
  @Input() disable: boolean;

  onModelChange: Function = () => { };
  onModelTouched: Function = () => { };

  writeValue(obj: any): void { this.value = obj; }
  registerOnChange(fn: any): void { this.onModelChange = fn; }
  registerOnTouched(fn: any): void { this.onModelTouched = fn; }
  setDisabledState?(val: boolean): void { this.disable = val; }

}

Read

writeValue(obj: any): void { 
    this.value = obj; 
}

Write

onClick(event: Event): void {
    this.onModelChange(this.value);
}

ng-touched ng-untouched

onBlur(value: any): void {
    this.onModelTouched();
}

disabled

new FormControl({value:'', disable.true};)

Demo