<div fxLayout='row' fxLayoutAlign="end center" class="app-password">
  <input fxFlex kendoTextBox
    [ngClass]="{ 'ng-dirty': isDirty }"
    [(value)]="currentValue"
    [attr.type]="type"
    [disabled]="isDisabled"
    (touched) ="onTouched($event)"
    (input)="onChange($event)"
    (blur)="onBlur()"
    (focus)="onFocus()"
  /><span   [ngClass]="{'k-icon': true, 'k-i-unlock': isShowPassword , 'k-i-lock': !isShowPassword }"
    (mouseup)="onMouseUp()"
    (mousedown)="onMouseDown()"
    ></span>
</div>

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

@Component({
  selector: 'app-custom-control',
  templateUrl: './CustomControl.component.html',
  styleUrls: ['./CustomControl.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PasswordComponent),
      useValue: (c: FormControl) => PasswordComponent,
      multi: true
    }
  ]
})
export class CustomControl implements ControlValueAccessor, OnInit {
  public isDisabled: boolean;
  public isDirty = false;
  public type = 'password';
  public isShowPassword = false;
  public currentValue: string = null;
  // Events change and touched
  private propagateChange = (_: any) => { };
  private propagateTouched = () => { };

  constructor() { }

  public ngOnInit() { }

  public writeValue(password: string): void {
    if (!password || typeof password !== 'string') {
      return;
    }
    this.currentValue = password;
    this.propagateTouched();
    this.propagateChange(this.currentValue);
  }

  public registerOnChange(fn: any): void {
    console.log(fn);
    this.propagateChange = fn;
  }

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

  public setDisabledState?(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  public get value(): string {
    return this.currentValue;
  }

  public onTouched(event) {
    this.propagateTouched();
  }

  public onShow() {
    if (this.type === 'password') {
      this.type = 'text';
    } else {
      this.type = 'password';
    }
  }

  public onMouseUp() {
    this.type = 'password';
    this.isShowPassword = false;
  }

  public onMouseDown() {
    this.type = 'text';
    this.isShowPassword = true;
  }

  public onChange(event) {
    this.writeValue(event.target.value);
  }


  public onBlur() {

  }

  public onFocus() {
    this.isDirty = true;
    this.propagateTouched();
  }

}

import { FormControl, FormGroup, Validators } from '@angular/forms';
.....
    const passwordControl = new FormControl(null, [Validators.requirement, Validators.max(3)])

<app-custom-control [formControlName]="'password'" ></app-custom-control>