matInput 标签隐藏在焦点上答案

【问题标题】：matInput Label Hiding on focusmatInput 标签隐藏在焦点上
【发布时间】：2020-08-28 06:06:28
【问题描述】：

我刚开始使用 Angular 材质。我从Official Material Input docs 复制了一个代码。

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

Before Focus

After Focus

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

谢谢

编辑：

我创建了一个材质模块，我在其中导入了所有与材质相关的必要模块，然后将其导出到 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>

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

节点版本为@12.16.2

Angular 版本是@9.1.3

【问题讨论】：

很难在不显示代码的情况下提供帮助！你有没有把它添加到你的 app.module: import {MatInputModule} from '@angular/material/input';
@Lys 我已经用所需文件更新了问题。如果您需要任何其他文件，请告诉我。
你的控制台有什么错误，或者 css 弄乱了它吗？我刚刚在 stackblitz 中做了一个小应用程序，一切正常
是的，存在版本不匹配警告。 ``` 您的全局 Angular CLI 版本 (9.1.3) 高于本地版本 (9.1.0)。使用本地 Angular CLI 版本。要禁用此警告，请使用“ng config -g cli.warnings.versionMismatch false”。 ```是不是因为这个警告而发生的？
@Lys 我更新了我的本地角度版本。但是，问题仍然存在。

标签： angular angular-material mat-input

【解决方案1】：

结果。由于工具栏中的水平溢出，我写了这个

styles.css


* {
    overflow-x: hidden;
}

在我删除 css 属性后问题得到解决。

【讨论】：