matInput 标签隐藏在焦点上
matInput Label Hiding on focus
我刚开始使用 Angular Material。
我从 Official Material Input 文档中复制了一段代码。
但是,每当我专注于输入时,它会在浮动时隐藏。
Before Focus
After Focus
P.S。 :它发生在每个表单字段和输入上。
请帮助我。
谢谢
编辑:
我创建了一个 material 模块,我在其中导入了与 material 相关的所有必要模块,然后将其导出到 app.module.ts
material.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>
刚刚从官方Material文档
复制而来
节点版本为@12.16.2
Angular版本为@9.1.3
原来如此。
由于工具栏中的水平溢出,我写了这篇文章
styles.css
* {
overflow-x: hidden;
}
我删除 css 属性.
后问题解决了
我刚开始使用 Angular Material。 我从 Official Material Input 文档中复制了一段代码。
但是,每当我专注于输入时,它会在浮动时隐藏。
Before Focus
After Focus
P.S。 :它发生在每个表单字段和输入上。 请帮助我。
谢谢
编辑:
我创建了一个 material 模块,我在其中导入了与 material 相关的所有必要模块,然后将其导出到 app.module.ts
material.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>
刚刚从官方Material文档
复制而来节点版本为@12.16.2
Angular版本为@9.1.3
原来如此。 由于工具栏中的水平溢出,我写了这篇文章
styles.css
* {
overflow-x: hidden;
}
我删除 css 属性.
后问题解决了