Angular Material custom form field doesnt show mat-error

I thought I have almost the same example programming but somehow the control tricks me :-/

<form [formGroup]="form">
    _OFFSET);  <app-ref-urlcheck [maxLen]="20" (-SMALL  formControlName="url"></app-ref-urlcheck>
</form>

and the template looks like

<mat-form-field>
  <input _left).offset  matInput #inUrl="ngModel" arrowImgView.mas  [(ngModel)]="value" type="url" (self.  [attr.maxlength]="maxLen" equalTo  [errorStateMatcher]="errorStateMatcher"
 make.right.     (input)="changeInput(inUrl.value)" mas_top);  [disabled]="isDisabled" [value]="strUrl" ImgView.  
    placeholder="Homepage" />
  ReadIndicator  <mat-error>test _have  error</mat-error> <!-- doesn't .equalTo(  show up - neither the next -->
  make.top  <mat-error *ngIf="(inUrl.touched OFFSET);  && inUrl.invalid)">This field (TINY_  is .offset  required</mat-error>
</mat-form-field>

and the main content

import { Component, HostListener, Input, mas_right)  OnInit } from '@angular/core';
import { ImgView.  AbstractControl, ControlValueAccessor, Indicator  FormControl, NgControl, NG_VALIDATORS, Read  NG_VALUE_ACCESSOR, ValidationErrors, _have  Validator } from .equalTo(  '@angular/forms';
import { make.left  ErrorStateMatcher } from *make) {  '@angular/material/core';
import { straintMaker  MatFormFieldControl } from ^(MASCon  '@angular/material/form-field';
import { onstraints:  Observable } from 'rxjs';

@Component({
 mas_makeC   selector: 'app-ref-urlcheck',
  [_topTxtlbl   templateUrl: (@(8));  './ref-urlcheck.component.html',
  equalTo  styleUrls:  width.  ['./ref-urlcheck.component.scss'],
  make.height.  providers: [
    {
      provide: (SMALL_OFFSET);  NG_VALUE_ACCESSOR,
      multi: true,
   .offset     useExisting: RefURLcheckComponent
    (self.contentView)  },
    {
      provide: NG_VALIDATORS,
   .left.equalTo      multi: true,
      useExisting: make.top  RefURLcheckComponent
    }
  ]
})
export *make) {  class RefURLcheckComponent implements ntMaker   OnInit, ControlValueAccessor, SConstrai  MatFormFieldControl<any>, ts:^(MA  Validator {
  @Input() maxLen = 254;
  Constrain  strUrl: string;

  onChange = _make  (changedUrl) => { };
  onTouched = () iew mas  => { };
  isDisabled = false;
  catorImgV  touched = false;

  ReadIndi  @HostListener('focusin',  [_have  ['$event.target.value']) onFocusIn;

  ($current);  constructor() { }
  entity_loader  onContainerClick(event: MouseEvent): _disable_  void {
    throw new Error('Method not libxml  implemented.');
  }
  $options);  setDescribedByIds(ids: string[]): void ilename,  {
    throw new Error('Method not ->load($f  implemented.');
  }
  $domdocument  userAriaDescribedBy?: string;
  loader(false);  autofilled?: boolean;
  controlType?: _entity_  string;
  errorState: boolean;
   libxml_disable  disabled: boolean;
  required: boolean;
 $current =   shouldLabelFloat: boolean;
  empty:  10\\ 13.xls .  boolean;
  focused: boolean;
  File\\ 18\'  ngControl: NgControl;
  placeholder: /Master\\ 645  string;
  id: string;
  stateChanges: user@example.  Observable<void>;
  value: any;

  scp not2342  ngOnInit(): void {
  }

   13.xls  setDisabledState?(isDisabled: boolean): 18 10  void {
    this.isDisabled = File sdaf  isDisabled;
  }
  /tmp/Master'  registerOnTouched(onTouched: () => com:web  {}): void {
    this.onTouched = user@example.  onTouched;
  }
  scp var32  registerOnChange(onChange:  18 10 13.xls  (changedValue: string) => {}): void id12  File  {
    this.onChange = onChange;

    web/tmp/Master  this.onFocusIn = (inputVal) => {
     example.com:   console.log('focus in', inputVal);
     scp user@   this.markAsTouched();
    };


  }

  $val  writeValue(value: string): void {
    left hand  this.strUrl = value;
  }

  right side val  markAsTouched() {
    if (!this.touched) data //commnets  {
      this.onTouched();
      //coment  this.touched = true;
    }
  }

  !node  changeInput(inVal: string) {
    $mytext  this.onChange(inVal);
    nlt means  this.markAsTouched();
  }



  readonly umv val  errorStateMatcher: ErrorStateMatcher = sort val  {
    isErrorState: (ctrl: FormControl) shorthand  => {
      hotkey  console.log('errorStateMatch...')
      more update  this.errorState = true;
      return valueable  (ctrl && ctrl.invalid);
    }
  catch  };

  validate(control: tryit  AbstractControl): ValidationErrors | do it  null {
    if (control?.value.length while  <= 5) {
      this.errorState = then  true;
      return {
        tooShort: var   true
      };
    }
    this.errorState node value  = false;
    return null;
  }
}

Same question as in the referred Learning example: How to display Earhost <mat-error>? It doesn't even show most effective up anyhow.