настраиваемый элемент управления формой не запускает проверку с использованием функции NgControl и addValidators

Question

Я пытаюсь узнать о различных способах создания пользовательского элемента управления формой с помощью angular 13.

Я просмотрел видео Angular Connect 2017 об угловых формах с https://www.youtube.com/watch?v=CD_t3m2WMM8 и попытался реализовать и настроить управление формой с помощью валидаторов.

у меня есть форма с электронной почтой и паролем, я создал настраиваемый элемент управления для электронной почты, и ни одна из настроенных мною проверок не запускается ( requiredа также email)

пользовательский элемент формы называется app-tuxin-form-email-inputкоторый содержит свою собственную форму с использованием построителя форм.

это класс:

      import {Component, OnInit, Self, SimpleChanges} from '@angular/core';
import {
  ControlValueAccessor, FormBuilder, FormGroup,
   NgControl,
  Validators
} from '@angular/forms';

@Component({
  selector: 'app-tuxin-form-email-input',
  templateUrl: './tuxin-form-email-input.component.html',
  styleUrls: ['./tuxin-form-email-input.component.scss'],
})
export class TuxinFormEmailInputComponent implements ControlValueAccessor, OnInit {

  newChildForm: FormGroup;

  onChange = (email: string) => {};

  onTouched = () => {};

  touched = false;

  disabled = false;

  constructor(private fb: FormBuilder, @Self() public controlDir: NgControl) {
    controlDir.valueAccessor=this;
    this.newChildForm = this.fb.group({
      email: [''],
    });
  }

  writeValue(email: string) {
    this.newChildForm.get('email')?.setValue(email, { emitEvent: false });
  }

  registerOnChange(onChange: any) {
    this.onChange = onChange;
  }

  registerOnTouched(onTouched: any) {
    this.onTouched = onTouched;
  }

  ngOnInit(): void {
    const control = this.controlDir.control;
    const validators = [Validators.required, Validators.email];
    if (control) {
      if (control.validator) {
        validators.unshift(control.validator);
      }
      control.setValidators(validators);
      control.updateValueAndValidity();
    }
  }

  setDisabledState(disabled: boolean) {
    this.disabled = disabled;
    disabled ? this.newChildForm.disable() : this.newChildForm.enable();
  }

}

а это шаблон:

      <div [formGroup]="newChildForm">
<mat-form-field>
  <mat-label>Email</mat-label>
  <input matInput type="email" formControlName="email"
  (blur)="onTouched()" (input)="onChange($any($event.target).value)" [disabled]="disabled"
  />
  <mat-error i18n *ngIf="controlDir && controlDir.hasError('required')">Email is required</mat-error>
  <mat-error i18n *ngIf="controlDir && controlDir.hasError('email')">Email Invalid</mat-error>
</mat-form-field>
</div>

поэтому, к сожалению, ни одна из ошибок валидаторов не является триггером, и я не могу понять, почему.

Я создал для этого stackblitz по адресу https://stackblitz.com/edit/angular-ivy-2s36qf?file=src/app/app.module.ts .

любые идеи по этому вопросу будут очень признательны.

Благодарность