角度材质中的"type"属性有问题

Question

如果不添加属性，它看起来应该：

1

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

阿拉伯数字

它显示为文本框。

到目前为止，我拥有的代码：

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;

}