如何阻止使用Material图标切换密码可见性时输入框样式变化？

问题根源 #

• 你的<input>标签同时声明了静态type="password"和动态[type]绑定，属性重复会导致浏览器解析异常，进而触发样式变化。
• 直接在普通<div>中使用matSuffix指令不符合Angular Material的使用规范，matSuffix需要配合<mat-form-field>容器和matInput指令才能正常工作，这也是样式异常的核心原因。

修正后的代码 #

<div class="form-group mt-4">
  <mat-form-field appearance="fill" class="w-100">
    <mat-label>Password</mat-label>
    <input 
      matInput
      [type]="hide ? 'password' : 'text'" 
      formControlName="password" 
      id="password" 
      placeholder="Password" 
      required
    />
    <mat-icon matSuffix (click)="hide = !hide">
      {{ hide ? 'visibility_off' : 'visibility' }}
    </mat-icon>
  </mat-form-field>
</div>

关键修正点 #

1. 移除重复属性：删掉静态type="password"，只保留动态[type]绑定，避免属性冲突。
2. 规范组件使用：用<mat-form-field>包裹输入框与图标，确保matSuffix能正确定位图标，同时让输入框继承Angular Material的统一样式。
3. 替换原生输入框：将普通<input>改为<input matInput>，使其成为Angular Material的标准输入组件，保证切换type时样式一致性。

额外排查建议 #

如果修正后仍有样式差异，检查全局或组件样式文件中是否针对input[type=text]和input[type=password]设置了不同的样式规则，需将这些规则统一，或者直接针对mat-input-element类设置样式。

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