поле ввода не работает в раскрывающемся списке выбора матов

Question

Привет, я работаю над angular раскрывающимся списком множественного выбора материала, в котором присутствуют некоторые флажки, переключатели и поля ввода. Проблема в том, что поле ввода не редактируется в раскрывающемся списке выбора коврика, и все работает нормально. В поле ввода я не могу что-то написать. Также он отлично работает в stackblitz, но я не могу понять. Я новичок в материале angular.

Вы можете найти мой код ниже:

HTML Код:

<mat-select
                      class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-control testClass"
                    >
                      <div
                        class="col-md-12 col-sm-12 col-lg-12 col-xs-12 pad-b-20px"
                      >
                        <input
                          type="text"
                          class="search-box form-control form-placeholder"
                          placeholder="Search"
                        />
                        <span
                          class="glyphicon glyphicon-search form-control-feedback"
                        ></span>
                      </div>

                      <div class="node-select-section">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <mat-option>
                            <mat-checkbox class="example-margin hb-dis-block">
                              FNW01-Node/Warehouse 1
                            </mat-checkbox>
                          </mat-option>
                          <mat-option>
                            <mat-checkbox class="example-margin hb-dis-block">
                              FNW01-Node/Warehouse 1
                            </mat-checkbox>
                          </mat-option>
                          <mat-option>
                            <mat-checkbox class="example-margin hb-dis-block">
                              FNW01-Node/Warehouse 1
                            </mat-checkbox>
                          </mat-option>
                          <mat-option>
                            <mat-checkbox class="example-margin hb-dis-block">
                              FNW01-Node/Warehouse 1
                            </mat-checkbox>
                          </mat-option>
                          <mat-option>
                            <mat-checkbox class="example-margin hb-dis-block">
                              FNW01-Node/Warehouse 1
                            </mat-checkbox>
                          </mat-option>
                          <mat-option>
                            <mat-checkbox class="example-margin hb-dis-block">
                              FNW01-Node/Warehouse 1
                            </mat-checkbox>
                          </mat-option>
                        </div>

                        <div
                          class="col-lg-6 col-md-6 col-sm-6 col-xs-12 default-select-section"
                        >
                          <aside>
                            <mat-radio-button value="1">
                              Set as Default
                            </mat-radio-button>
                            <input
                              type="text"
                              name="focus"
                              required
                              class="text-field form-control"
                            />
                          </aside>
                          <aside>
                            <mat-radio-button>
                              Set as Default
                            </mat-radio-button>
                            <input type="text" matInput />
                          </aside>
                          <aside>
                            <mat-radio-button>
                              Set as Default
                            </mat-radio-button>
                            <input
                              type="text"
                              name="focus2"
                              required
                              class="text-field form-control"
                            />
                          </aside>

                          <aside>
                            <mat-radio-button>
                              Set as Default
                            </mat-radio-button>
                            <input
                              type="text"
                              name="focus3"
                              required
                              class="text-field form-control"
                            />
                          </aside>

                          <aside>
                            <mat-radio-button>
                              Set as Default
                            </mat-radio-button>
                            <input
                              type="text"
                              name="focus4"
                              required
                              class="text-field form-control"
                            />
                          </aside>

                          <aside>
                            <mat-radio-button>
                              Set as Default
                            </mat-radio-button>
                            <input
                              type="text"
                              name="focus5"
                              required
                              class="text-field form-control"
                            />
                          </aside>
                        </div>
                        <div class="clearfix"></div>
                      </div>

                      <div
                        class="col-lg-6 col-md-6 col-sm-6 col-xs-12 select-clear-btn-padding"
                      >
                        <a href="javascript:void(0)"> Select All </a>
                        <a href="javascript:void(0)"> Clear All </a>
                      </div>

                      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pad-b-0">
                        <mat-option class="hb-align-right hb-no-padding">
                          <mat-checkbox class="example-margin hb-dis-block">
                            Send Aggregate Stock Across the Nodes
                          </mat-checkbox>
                        </mat-option>
                      </div>
                    </mat-select>

Module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ChannelsRoutingModule } from "./channels-routing.module";
import { AddChannelComponent } from "./add-channel/add-channel.component";
import { ChannelConfigurationComponent } from "./channel-configuration/channel-configuration.component";
import { AddChannelService } from "./add-channel/add-channel.service";
import { ChannelConfigurationService } from "./channel-configuration/channel-configuration.service";
import { DragDropModule } from "@angular/cdk/drag-drop";
import { ChannelAuthenticationComponent } from "./channel-authentication/channel-authentication.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import {
  MatSelectModule,
  MatMenuModule,
  MatIconModule,
  MatRippleModule,
  MatTabsModule,
  MatRadioModule,
  MatDatepickerModule,
  MatCheckboxModule,
  MAT_RIPPLE_GLOBAL_OPTIONS,
} from "@angular/material";
import { Ng2SearchPipeModule } from "ng2-search-filter";
import { MatSelectSearchModule } from "src/app/shared/common-components/mat-select-search/mat-select-search.module";
import { MatInputModule } from "@angular/material/input";
@NgModule({
  declarations: [
    AddChannelComponent,
    ChannelConfigurationComponent,
    ChannelAuthenticationComponent,
  ],
  imports: [
    CommonModule,
    ChannelsRoutingModule,
    DragDropModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatMenuModule,
    MatIconModule,
    MatCheckboxModule,
    MatRippleModule,
    MatTabsModule,
    MatRadioModule,
    MatSelectSearchModule,
    MatDatepickerModule,
    Ng2SearchPipeModule,
    MatInputModule,
  ],
  providers: [
    AddChannelService,
    ChannelConfigurationService,
    { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },
  ],
})
export class ChannelsModule {}