mat输入标签隐藏在焦点上

Question

我刚开始使用Angular Material。 我从官方材料输入文档中复制了一个代码。

但是，每当我专注于输入时，它都会在浮动时隐藏。

对焦之前

对焦后

PS：它发生在每个表单字段和输入上。 请帮助我。

谢谢

编辑：

我创建了一个材料模块，在其中导入与材料相关的所有必要模块，然后将其导出到 app.module.ts

材料模块

...
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
...
const MaterialComponents = [
...
MatFormFieldModule,
MatInputModule,
...
];
@NgModule({
imports: [ MaterialComponents ],
exports : [ MaterialComponents ]
})

app.module.ts

...
import { MaterialModule } from './material/material.module';
import { FlexLayoutModule, MediaChange, MediaObserver } from "@angular/flex-layout";
@NgModule({
declarations: [
...
routingComponents,
],
imports: [
...
FormsModule,
ReactiveFormsModule,
...
/* Material Imports */
MaterialModule,
FlexLayoutModule,
NgbModule,
],
providers: [ Title ],
bootstrap: [ AppComponent ]
})

首页.组件.html

<form class="form">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Email</mat-label>
<input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher" placeholder="Ex. [e-mail]">
<!-- <mat-hint>Errors appear instantly!</mat-hint> -->
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
<button mat-raised-button color="accent">Save</button>
</form>

它只是从官方材料文档中复制的

节点版本为 @12.16.2

角度版本是@9.1.3

Answer 1

事实证明。 我写这个是由于工具栏中的水平溢出

样式.css

* {
overflow-x: hidden;
}

删除 css 属性后，该问题已解决。