angular5 - 聚焦后不能消失占位符
问题描述
在这里,我使用 Angular5 的登录表单使用角度材料表单。当应用程序启动时,登录表单占位符不能被覆盖。但是一旦我登录并注销,那么只有输入字段会被覆盖。截屏
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide">{{!hide ? 'visibility' : 'visibility_off' }}</mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>
CSS File
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
解决方案
它对我来说工作正常。
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide"></mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>
推荐阅读
- java - Spring @Transactional 和长期运行的业务逻辑
- python-3.x - flask db migrate 抛出“AttributeError:无法设置属性”
- authentication - 在 Dot .Net Core 应用程序中重用 Asp.Net Membership 提供程序
- c++ - C ++程序在构造函数上崩溃
- express - 在 PUG 中实现类似 HTML 的模板
- performance - 查询溢出到磁盘
- object-detection - 对视频中的对象进行计数的评估指标是什么?
- reactjs - 如何使用 Nginx 服务“out”(下一个导出)文件夹 Nextjs
- sql-server - 在触发器上访问插入、删除的 clomns
- reactjs - setState 与 getDerivedStateFromProps 冲突