角材料浮动标签和动画不起作用

Question

我的角度材料组件正常工作，但 。我使用的

是“@angular/forms”;

该组件类似于以下内容：

<form [formGroup]="searchForm" class="form-container">
  <mat-card>
    <mat-card-content>
      <div class="col-md-6">
        <mat-form-field>
          <input  formControlName="partNumber" matInput placeholder="Part Nr.">
        </mat-form-field>
      </div>
    </mat-card-content>
    <mat-card-actions>
      <button (click)="searchHandler()" mat-raised-button color="primary">Search</button>
    </mat-card-actions>
  </mat-card>
</form>

我的输入显示如下： -

如上所述，该按钮也未升高。对表单字段的检查给出了cranspatatey（）时给出的，

<mat-form-field _ngcontent-c5="" class="mat-input-container mat-form-field ng-tns-c7-1 mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-hide-placeholder mat-primary ng-valid mat-form-field-should-float ng-dirty ng-touched"><div class="mat-input-wrapper mat-form-field-wrapper"><div class="mat-input-flex mat-form-field-flex"><!--bindings={
  "ng-reflect-ng-if": "0"
}--><div class="mat-input-infix mat-form-field-infix">
          <input _ngcontent-c5="" class="mat-input-element mat-form-field-autofill-control ng-valid ng-dirty ng-touched" formcontrolname="partNumber" matinput="" placeholder="Part Nr." ng-reflect-name="partNumber" ng-reflect-placeholder="Part Nr." id="mat-input-0" aria-invalid="false" aria-required="false">
        <span class="mat-form-field-label-wrapper mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><label class="mat-form-field-label mat-input-placeholder mat-form-field-placeholder ng-tns-c7-1 ng-star-inserted" ng-reflect-ng-switch="false" for="mat-input-0" aria-owns="mat-input-0"><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--><!---->Part Nr.<!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></label></span></div><!--bindings={
  "ng-reflect-ng-if": "0"
}--></div><div class="mat-input-underline mat-form-field-underline"><span class="mat-input-ripple mat-form-field-ripple"></span></div><div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper" ng-reflect-ng-switch="hint"><!--bindings={
  "ng-reflect-ng-switch-case": "error"
}--><!--bindings={
  "ng-reflect-ng-switch-case": "hint"
}--><div class="mat-input-hint-wrapper mat-form-field-hint-wrapper ng-tns-c7-1 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
  "ng-reflect-ng-if": ""
}--><div class="mat-input-hint-spacer mat-form-field-hint-spacer"></div></div></div></div></mat-form-field>

而这是它应显示的方式，

我使用的角，材料和CLI的版本如下：

我的CLI版本是旧的，可​​能是一个问题吗？

在app.module.ts中，我已导入

import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import {
  MatDatepickerModule,
  MatExpansionModule,
  MatInputModule,
  MatNativeDateModule,
  MatTableModule,
  MatPaginatorModule,
  MatCardModule,
  MatChipsModule,
  MatGridListModule
} from "@angular/material";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatSelectModule } from "@angular/material/select";
import { MatButtonModule } from "@angular/material/button";

并将它们添加到 ngmodule 装饰器导入。怎么了？这是一个传统项目，尽管还有许多其他组件。我想知道其他一些组件是否可能干扰这些材料组件？

Answer 1

自动化材料安装

尝试使用此命令安装材料：

ng添加 @angular/材料

以这种方式将在安装过程中提示您配置一些重要的内容，例如：

• browseranimationsmodule/（noopanimationmationsmodule）
• links in index.html中的link和类
• 。代码>

也许还可以查看官方文档。

我将在此处留给任何不使用不支持此的旧角/材料版本的人。

手动安装（材料5）

• npm i @angular/ [email＆nbsp; preateved]
  • 也安装缺失的降低：CDK
• npm i @angular/
• pretection” class =“ __ cf_email__” data-cfemail =“ 3A5B545453575B4E535555555555554497A0F140F140F1408140B0B0B”您的app.module.ts中的browseranimationmodule
• app.module.ts中的材料组件模块
• 导入

。
在这里

这是 stackblitz 我作为您作为您的参考来与您的项目进行比较。