angular - matInput 标签隐藏在焦点上
问题描述
我刚开始使用 Angular 材质。我从官方材料输入文档中复制了一个代码。
但是,每当我专注于输入时,它就会在它浮动时隐藏起来。
PS:它发生在每个表单字段和输入上。请帮我。
谢谢你
编辑:
我创建了一个材质模块,在其中导入与材质相关的所有必要模块,然后将其导出到 app.module.ts
材料.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 ]
})
home.component.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. pat@example.com">
<!-- <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
解决方案
原来。由于工具栏中的水平溢出,我写了这个
样式.css
* {
overflow-x: hidden;
}
删除 css 属性后,问题得到解决。
推荐阅读
- react-native - 如何使用 ref 在 React Native Video 中编辑视频播放器道具
- javascript - 使用 Switch Javascript 选择选项 HTML
- r - 将 Twitter 数据转换成整洁的格式
- python - 如何对字典中仅一个键值列表中的项目进行排序
- html - 当单元格跨越 n 列时,如何将表格列向下移动?
- groovy - 断言结果如何仅获取计数
- javascript - 页面刷新时带有正文和重定向页面的 Jquery 发布请求
- base64 - XSLT - 将 XML 元素编码为 base64 编码字符串
- reactjs - 我可以将 React Bootstrap 与 Next.js 一起使用吗?
- python - conda 无法识别已安装的软件包