MDBootsrap 表单输入文本重叠标签和标签在点击时无法按预期工作

Question

我正在尝试从 here 添加 material 设计 bootstrap 表单登录。

表格显示如下：

但是当我单击其中一个输入控件时，文本重叠，并且标签没有按预期移动到输入字段上方。

这是预期的结果：

这是实际结果

这是我的 HTML:

<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">

  <!-- Email -->
  <div class="md-form">
    <input type="email" id="materialLoginFormEmail" class="form-control">
    <label for="materialLoginFormEmail">E-mail</label>
  </div>

  <!-- Password -->
  <div class="md-form">
    <input type="password" id="materialLoginFormPassword" class="form-control">
    <label for="materialLoginFormPassword">Password</label>
  </div>

  <div class="d-flex justify-content-around">
    <div>
      <!-- Forgot password -->
      <a href="">Forgot password?</a>
    </div>
  </div>

  <!-- Sign in button -->
  <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign
    in</button>

  <!-- Register -->
  <p>Not a member?
    <a href="">Register</a>
  </p>

</form>
<!-- Form -->

下面是我的 angular.json:

中的一些值

"styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "./node_modules/quill/dist/quill.core.css",
          "./node_modules/quill/dist/quill.snow.css",
          "node_modules/animate.css/animate.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.min.js",
          "./node_modules/quill/dist/quill.js"
        ]

有人可以告诉我我遗漏了什么，以及为什么表格没有按预期工作吗？我已经完全复制了上面链接的教程中的代码。

Answer 1

您使用jQuery代码，这里是MDBAngular版本：

https://mdbootstrap.com/docs/angular/forms/basic/

要使标签正常工作，您需要向输入元素添加 mdbInput 指令。

MDBootsrap 表单输入文本重叠标签和标签在点击时无法按预期工作

MDBootsrap Form Input text overlapping label & label not working as expected onClick

angular

mdbootstrap