Невозможно получить доступ к событию нажатия кнопки в Angular

Question

Я создаю страницу входа в Angular, но каждый раз, когда я нажимаю кнопку «Вход», я не могу отправить свой http-запрос, и страница обновляется. Я думаю, что не могу получить доступ к событию нажатия моей кнопки.

<form class="form-container">
  <div>
    <b><h2>LOG-IN</h2></b>
    <div class="form-group">
      <label for="username">Username:</label>
      <input type=“text" class="form-control” (keyup)="onInput($event,'usr')">
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" (keyup)="onInput($event,'pwd')">
    </div>
    <button class="btn btn-outline-primary btn-block" (click)="login()">Log-in</button>
  </div>
</form>

Мой файл .ts выглядит следующим образом:

export class LoginComponent implements OnInit {
  user: any;

  usrnm: string;
  psswd: string;

  constructor(private service: UsersService) {
  }

  ngOnInit() {
  }

  onInput(event: any, lbl: string) {
    if (lbl === 'usr') {
      this.usrnm = event.target.value;
      console.log(this.usrnm.valueOf());
    }
    else {
      this.psswd = event.target.value;
      console.log(this.psswd.valueOf());
    }
  }

  login() {
    console.log(this.usrnm.valueOf());
    this.service.getUser(this.usrnm.valueOf()).subscribe((response : any) => {
      console.log(response);
    }, error => {
      alert('An unexpected error occured.');
      console.log(error);
    }); 
  }
}

Я заметил, что onInput () работает, но login () не выдает никаких результатов в консоли. Я просто не знаю, что не так.

Answer 1

Я очистил некоторые из ваших bootstrap классов, чтобы лучше видеть ваш код.
Я добавил type="submit" к кнопке входа в систему

теперь ваша кнопка работает! пожалуйста, отметьте это stackblitz

РЕДАКТИРОВАТЬ
пожалуйста, также отметьте двойные кавычки в следующей строке,

<input type=“text" class="form-control” (keyup)="onInput($event,'usr')">

Вы должны изменить это “ на это "

Answer 2

Я вернулся к своим книгам по кодированию и просмотрел некоторый код javascript, где обнаружил, что страница обновилась из-за «отправки». Вместо этого он рекомендовал использовать event.preventDefault(); в login (), и это решило мою проблему.