Question

这是我的HTML。

当我单击Enter时，我想要单击功能。

它第一次不起作用。手动单击按钮然后单击Enter后，它就可以正常工作

<mat-card class="example-card">
<mat-card-header>
  <mat-card-title>Login</mat-card-title>
</mat-card-header>
<mat-card-content>
  <form class="example-form">
    <table class="example-full-width" cellspacing="0">
      <tr>
        <td>
          <mat-form-field class="example-full-width">
          <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
          </mat-form-field>
        </td>
      </tr>
      <tr>
      <td><mat-form-field class="example-full-width">
        <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
      </mat-form-field></td>
    </tr></table>
  </form>
</mat-card-content>
<mat-card-actions>
  <button mat-raised-button (click)="login()" color="primary" type="submit">Login</button>
</mat-card-actions>

Answer 1

您可以使用表单标签的(ngSubmit)：

<form class="example-form" (ngSubmit)="login()">
  .......
  .......
</form>

Answer 2

//将按钮放在表单标签内

<mat-card class="example-card">
<mat-card-header>
  <mat-card-title>Login</mat-card-title>
</mat-card-header>
<mat-card-content>
  <form class="example-form">
    <table class="example-full-width" cellspacing="0">
      <tr>
        <td>
          <mat-form-field class="example-full-width">
          <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
          </mat-form-field>
        </td>
      </tr>
      <tr>
      <td><mat-form-field class="example-full-width">
        <input matInput placeholder="Password" 
        [(ngModel)]="password"type="password" name="password" required>
      </mat-form-field></td>
    </tr></table>
     <button mat-raised-button (click)="login()" color="primary" 
    type="submit">Login</button>
  </form>
</mat-card-content>
</mat-card>

输入首次在Angular Material中不起作用

2 个答案: