我刚开始使用 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