Применение проверки шаблона в пользовательском элементе управления в Angular 6+

Question

Это первый раз, когда я создаю пользовательский элемент управления Angular для редактирования текстового поля / надписи. Весь мой код работает хорошо, но я обработал валидацию (и) с помощью моей пользовательской логики. (путем проверки значение не равно нулю или не соответствует RegEx для события onChange).

Я думаю, что могу использовать NG_VALUE_VALIDATORS или какую-то похожую технику Angular для более легкого включения тех же функций. Но я не знаю, как я могу это использовать. Если кто-то может помочь, это было бы здорово!

import { Component, OnInit, forwardRef, Input, EventEmitter, Output, HostListener } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

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


@Component({
  selector: 'app-inline-edit-multiline-textbox',
  templateUrl: './inline-edit-multiline-textbox.component.html',
  providers: [VALUE_ACCESSOR]
})

export class InlineEditMultilineTextboxComponent implements OnInit {
  @Input() label: string = "Enter value here";
  @Input() name: string;
  @Input() required: boolean = true;
  @Input() data: Array<string> = [];
  @Output() valueChange = new EventEmitter();
  private _value: string = '';
  private preValue: Array<string> = [];
  public editing: boolean = false;
  private isBlank: boolean = false;
  public onChange: any = Function.prototype;
  public onTouched: any = Function.prototype;
  pre: any;
  constructor() { }

  ngOnInit(): void {

  }
  get value(): any {
    return this._value;
  }

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

  writeValue(value: any) {
    this.checkRequired();
    this._value = value;
  }

  public registerOnChange(fn: (_: any) => {}): void {
    this.onChange = fn;
  }

  public registerOnTouched(fn: () => {}): void {
    this.onTouched = fn;
  }

  @HostListener('document:click', ['$event'])
  clickout($event) {
    if ($event.target.classList.contains("form-control")) {
      return;
    }

    if ($event.target.classList.contains("fa-save") || $event.target.classList.contains("btnsave")) {
      this.preValue = this.data.map(x => x);
    }
    else {
      this.data = this.preValue.map(x => x);
      this.editing = false;
    }
  }

  beginEdit() {
    this.checkRequired();
    this.preValue = this.data.map(x => x);
    this.editing = true;
  }

  checkRequired() {
    var arr = this.data.join("");
    if (arr.length < 1) {
      this.isBlank = true;
    }
    else {
      this.isBlank = false;
    }
  }

  keyupTextbox(value, index) {
    this.data[index] = value;
    this.checkRequired();
  }

  save(): void {
    this.valueChange.emit(this.data);
  }
}