MatDialog中仅首个mat-input正常，第二个输入时标签不上移问题咨询

嘿，我瞅你在MatDialog里用两个matInput时碰到了第二个输入框的label不上移的问题，十有八九是代码里的小疏漏搞的鬼！先看你贴的代码片段，第二个<input>的指令写成了matIn...，明显没写完——Angular Material的输入框必须正确绑定完整的matInput指令，不然组件根本识别不了它，自然不会触发label上移的交互逻辑。

下面给你分步解决的思路和修正后的代码：

1. 先修复最可能的问题：matInput拼写错误 #

把第二个输入框的指令补全成matInput，这是最直接的修复点。修正后的完整代码示例：

<form>
  <table class="example-full-width" cellspacing="0">
    <tr>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="First name">
        </mat-form-field>
      </td>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Last name"> <!-- 这里补全了matInput指令 -->
        </mat-form-field>
      </td>
    </tr>
  </table>
</form>

2. 确保表单相关模块正确导入 #

如果你的表单用到了双向绑定[(ngModel)]或者响应式表单控件，得在Dialog组件所在的模块里导入对应的模块：

• 模板驱动表单：导入FormsModule
• 响应式表单：导入ReactiveFormsModule

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { YourDialogComponent } from './your-dialog.component';

@NgModule({
  imports: [
    FormsModule, // 模板驱动表单用这个
    ReactiveFormsModule, // 响应式表单用这个
    MatFormFieldModule,
    MatInputModule
  ],
  declarations: [YourDialogComponent]
})
export class YourDialogModule { }

3. 验证表单结构正确性 #

确保mat-form-field和input的嵌套没问题，每个mat-form-field里只放一个matInput，不要有多余的标签干扰布局——你的table布局本身是没问题的，但要保证每个单元格里的表单结构是规范的。

如果是用响应式表单的场景，给你个完整的示例参考：
组件类代码：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  templateUrl: './your-dialog.component.html'
})
export class YourDialogComponent {
  userForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  constructor(public dialogRef: MatDialogRef<YourDialogComponent>) { }
}

模板代码：

<form [formGroup]="userForm">
  <table class="example-full-width" cellspacing="0">
    <tr>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="First name" formControlName="firstName">
        </mat-form-field>
      </td>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Last name" formControlName="lastName">
        </mat-form-field>
      </td>
    </tr>
  </table>
</form>

按照上面的步骤来，基本就能解决第二个输入框label不上移的问题啦！

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