Angular material 将FormControlName添加到mat输入字段时未激发输入事件

我使用角材料的mat输入，并通过将我的组件包装在角材料输入周围，使其成为我自己的组件，如

。我通过NgControl向其添加了自定义验证

我正在使用

组件创建单独的搜索组件

问题是，当我调用搜索组件并向其添加formControlName时，不会触发输入事件。当我删除formControlName时，则会触发输入事件

my-input.html

    <mat-form-field  [ngClass]="className"  [floatLabel]="floatLabel">
      <mat-label *ngIf="label">{{label}}</mat-label>
      <input matInput
          #input
          [attr.autocomplete]="autocomplete"
          [attr.maxlength]="maxlength"
          [attr.type]="type"
          [attr.accept]="accept"
          [attr.isPercentage]="isPercentage"
          placeholder={{placeholder}}
          readonly={{readonly}}
          formcontrol="ngControl.control"
          disabled={{disabled}}
          required={{required}}
          autofocus={{autoFocus}}
          value={{value}}
          (keyup)="onKeyUp($event)"
          (keydown)="onKeyDown($event)"
          (keyup.backspace)="onKeyUpBackspace($event)"
          (keydown.enter)="onKeyDownEnter($event)"
          (keyup.enter)="onKeyUpEnter($event)"
          (input)="onInput($event.target.value)"
          (focus)="onFocus($event)"
          (blur)="onBlur($event.target.value)"
          (change)="onChange($event)"
          (ngModelChange)="onNgModelChanged()"
          [matAutocompleteDisabled]="!matautocomplete"
          [matAutocomplete]="matautocomplete">
    </mat-form-field>

search.html

<div class="search-wrapper">
  <img 
    [src]="imgSrc"
    tabindex="0" 
    (click)="isSearchIconClickable ? onSearchIconClick($event) : ''"
    (keyup.enter)="isSearchIconClickable ? onSearchIconClick($event) : ''">
    <my-input 
        [autocomplete]="autocomplete" 
        [type]="type" 
        [placeholder]="placeholder"
        [floatLabel]="floatLabel" 
        [disabled]="disabled"
        [readonly]="readonly"
        [required]="required"
        [(value)]="value"
        (focusChange)="onFocus($event)" 
        (keyUpEnter)="onEnter($event)"
        (inputChange)="onInput($event)"
        [formControl]="control"
        >
    </my-input>
    <div 
        *ngIf="showCloseIcon"
        class="close" 
        (click)="onCloseClick($event)"
        (keyup.enter)="onCloseClick($event)"
        tabindex="0">
        <img [src]="clearImage">
    </div>
</div>

app.component.html

<form [formGroup]="addForm">
<div class="col">
          <h4 class="title">hover / focused / active</h4>
          <home-search placeholder="Search" type="text" disabled="false" autocomplete="off"
                     required="false" readonly="false" (searchTextOnEnter)="keyDownEnterFunction($event)" imgSrc="assets/images/search.svg"
                     (clearSearch)="closeSearchClick()" clearImage="assets/images/close-s-secondary.svg" formControlName="searchControl">
          </home-search>
<div *ngIf="(submitted || formControl.searchControl.touched || formControl.searchControl.dirty) && formControl.searchControl.errors">
          <mat-error *ngIf="formControl.searchControl.errors?.maxlength">Maximum length exceeded</mat-error>
        </div>

        </div>
</form>
    ```

悬停/聚焦/激活
超过最大长度
```

<form [formGroup]="addForm">
<div class="col">
          <h4 class="title">hover / focused / active</h4>
          <home-search placeholder="Search" type="text" disabled="false" autocomplete="off"
                     required="false" readonly="false" (searchTextOnEnter)="keyDownEnterFunction($event)" imgSrc="assets/images/search.svg"
                     (clearSearch)="closeSearchClick()" clearImage="assets/images/close-s-secondary.svg" formControlName="searchControl">
          </home-search>
<div *ngIf="(submitted || formControl.searchControl.touched || formControl.searchControl.dirty) && formControl.searchControl.errors">
          <mat-error *ngIf="formControl.searchControl.errors?.maxlength">Maximum length exceeded</mat-error>
        </div>

        </div>
</form>
    ```