Angular Material 中的 "type" 属性 有问题

Question

不添加 属性，看起来应该是：

1

当你添加它时，它看起来像这样：

2

显示为文本框。

我目前的代码：

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { SignupViaemailComponent } from './signup-viaemail/signup-viaemail.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatToolbarModule, MatFormFieldModule, MatButtonModule, MatCardModule, MatMenuModule,
         MatIconModule, MatInputModule, MatTabsModule, MatDialogModule, MatRadioModule } from '@angular/material';

import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SignupComponent,
    ForgotPasswordComponent,
    SignupViaemailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatInputModule,
    MatTabsModule,
    MatDialogModule,
    FlexLayoutModule,
    MatRadioModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ForgotPasswordComponent, SignupViaemailComponent]
})
export class AppModule { }

login.component.ts:

import { Component, OnInit } from '@angular/core';
import { usuario } from "../_modelos/usuario.model";

import {FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';

import { ForgotPasswordComponent } from '../forgot-password/forgot-password.component';

import { MatDialog } from '@angular/material';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
           this.email.hasError('email') ? 'Not a valid email' :
           '';
  }

  hide = true;

  constructor(public dialog: MatDialog) {}

  ngOnInit() {}

  openForgotPasswordDialog() {
    let dialog = this.dialog.open(ForgotPasswordComponent);

  }

}

login.component.html:

<div fxLayout="column" fxLayoutAlign="center center" class="column-login">

  <div class="email-container">
    <mat-form-field>

      <input matInput placeholder="Email Address" [formControl]="email" required>
      <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
  </div>

  <div class="password-container">
    <mat-form-field>

      <input matInput placeholder="Password" [type]="hide ? 'password' : 'text'">
      <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
    </mat-form-field>
  </div>

  <button mat-raised-button color="primary">Submit</button>
  <button mat-button (click)="openForgotPasswordDialog()">Forgot Password</button>

</div>

这就是导致我出现问题的原因：

[type]="hide ? 'password' : 'text'"

我从Angular Material的官网得到了输入密码的代码。

Answer 1

如果您有默认显示的边框问题，可以使用此解决

.输入{

box-shadow: none;

}