聚焦后不能消失占位符答案

【问题标题】：cant disappear placeholder after focus on it聚焦后不能消失占位符
【发布时间】：2018-06-09 03:49:35
【问题描述】：

这里我使用Angular5的登录表单使用角度材质表单。当应用程序启动时，登录表单占位符不能被覆盖。但是一旦我登录并注销，那么只有输入字段会被覆盖。 Screenshot

<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;
}

【问题讨论】：

标签： angular5 angular-material-5

【解决方案1】：

您可以使用 mat-placeholder 并通过 CSS 轻松处理可见性

样式：

.placeholder.hide-ph {
    display: none;
  }

component.ts:

<input 
  ...
  [value]="value"
  floatPlaceholder="never"
  (focus)="hidePlaceholder = true" // <== you need this
/>
 <mat-icon class="caret" matSuffix>arrow_drop_down</mat-icon>
 <mat-placeholder 
   class="placeholder" 
   [class.hide-ph]="!!value || hidePlaceholder" // <== and this to hide placeholder by css
 >
   {{ placeholder }}
 </mat-placeholder>

【讨论】：

我必须这样做 (keyup)="hidePlaceholder = true" (focus)="hidePlaceholder = true"

【解决方案2】：

它对我来说很好用。

.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>

【讨论】：