Angular mat-expansion-panel内嵌input点击失焦无法输入问题求助

问题原因 #

• 你给mat-expansion-panel组件添加了disabled属性，Angular Material的禁用状态展开面板会默认拦截内部所有交互事件，阻止内部表单元素获得焦点，因此点击输入框后会立刻丢失焦点无法输入。
• 你的input标签语法存在错误，末尾多了一个冗余的双引号，也可能导致表单渲染异常。

解决方案 #

1. 移除mat-expansion-panel上的disabled属性：你已经配置了hideToggle隐藏折叠开关，本身就无法手动折叠面板，不需要额外加disabled属性。如果需要保留原禁用状态的视觉样式，可自定义CSS类实现。
2. 修正input标签的语法错误，删除多余的双引号。

修改后代码示例 #

<ng-container *ngFor="let i of listSousCategorie">
  <mat-expansion-panel  class="childPanel" [expanded]="true" hideToggle style="background:#ecfaff;">
    <div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center"  >
      <div style="padding-left:1em" fxFlex="grow" >{{i.libelle}}</div>
      <mat-form-field style="width:50px" appearance="standard" [formGroup]="form">
        <mat-label>Note</mat-label>
        <input  type="text" matInput  formControlName="Note" >
      </mat-form-field>
    </div>
  </mat-expansion-panel>
</ng-container>

内容的提问来源于stack exchange，提问作者drnwork