Введите не работает Впервые в угловой материал

Question

Вот мой HTML.

Когда я нажимаю на кнопку ввода, я хочу функцию щелчка.

Это не работает в первый раз. Как только я вручную нажимаю на кнопку и затем нажимаю ввод, она работает

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