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

Question

我Angular 6用Angular Material.

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

我试图复制这个问题，stackblitz但运气不佳。

附上截图了解更多详情

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

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

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

有人已经解决了这个问题吗？

Answer 1

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

根据引用预构建主题的指南，您需要将所选主题的 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 文件的路径。

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