在表单字段中键入时，Angular Material占位符标签不动画

Question

我正在使用Angular Material。一旦我开始在表单字段中输入内容，我就无法看到我的占位符标签（应该移动到顶部）。

这是我的代码：

 <mat-card-content>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Username" value="" class="form-control"
               formControlName="username" required>
      </mat-form-field>
</mat-car-content>

package.json：

"dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "inflight": "^1.0.6",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

Answer 1

我遇到了同样的问题并通过使用预先构建的主题解决了它，通过更新styles.css文件：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Theming Angular Material Related question