角度材料 - 标签与输入重叠

Posted 2023-03-13

【中文标题】角度材料 - 标签与输入重叠

【英文标题】：angular material - labels overlap with the input

【发布时间】：2018-12-14 22:56:01

【问题描述】：

我使用Angular 6 和Angular Material。

问题：当浏览器自动填充字段时标签与输入重叠。

我尝试使用stackblitz 复制该问题，但运气不佳。

附上截图了解详情

chrome 控制台选项卡中没有列出任何问题。

我的 LoginComponent 缺少 ngOnInit 和 ngAfterInit - 目前我没有这些方法的任何代码。

也许我误解了在页面加载时应该如何初始化控件的概念。

有人解决了这个问题吗？

【问题讨论】：

您能否为其创建一个 stackblitz 以便我们为您提供帮助？

嗨@AnkitSharma，我刚刚尝试复制它以填充ngOnInit 和ngAfterInit 中的字段 - 但它工作正常。当浏览器自动填充字段时会出现此问题。我不认为这是我可以用stackblits 复制的东西。赦免。 （更新了帖子）

@AnkitSharma stackblitz.com/edit/angular-x3kudh

@AnkitSharma 我还尝试使用调试器的DOM browser 中的value 属性提供文本输入。但这不会用文本填充该字段。

嗨@Alex，我尝试重新创建，但不幸的是，我无法自动填充，因此无法找到解决方案。但是，您是否可以在用户名更改后尝试使用密码本身再次设置密码字段，并在自动填充后查看它是否有效？

【参考方案1】：

确保您引用的是 Material 主题；您自己的主题或预构建的 Material 主题之一。

根据the guidance for referencing a pre-built theme，您需要将所选主题的 css 文件添加到 angular.json 中的样式数组中。

因此，如果您选择预构建的 靛蓝粉红色 主题

，您的 angular.json 将如下所示

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "demo": 
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": ,
      "architect": 
        "build": 
        "builder": "@angular-devkit/build-angular:browser",
        "options": 
          "outputPath": "dist/demo",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "src/tsconfig.app.json",
          "assets": ["src/favicon.ico", "src/assets"],
          "styles": [
            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
            "src/styles.css"
          ],
          "scripts": []
      ,

注意样式数组现在如何包含指向 indigo-pink.css 文件的路径。

主题的存在将解决您描述的样式问题。