javascript - Angular 引用错误 : Calling typescript function from html form or button

Question

所以我刚开始使用 Angular，我有一个新的 Angular 组件、一个 TS 文件和一个 HTML 文件。在 HTML 文件中，我有一个表单应该在按下提交按钮时调用相应 typescript 文件中的函数。看起来很简单，但我不断收到以下错误:

Uncaught ReferenceError: validateLogin is not defined at :4200/HTMLInputElement.onclick (http:/localhost:4200/validateLogin();?email=email%40lol.com&password=password:13:283) onclick @ validateLogin();?email=email%40lol.com&password=password:13 VM569:1 Uncaught ReferenceError: validateLogin is not defined at :1:1

两个 ReferenceErrors，一个是尝试使用 onclick，一次是尝试使用 form 中的 action 属性。提交时，我希望 div 消失，并显示文本“成功”。这是两个文件:

import { Component } from '@angular/core';
import { NullAstVisitor } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TaManagementApp';
  toggleLoginHTML = true;

  constructor() {
    this.toggleLoginHTML = true;
  } 

  validateLogin() {
//  if ()
    this.toggleLoginHTML = false;
  }
}

和

<!--The content below is only a placeholder and can be replaced.-->
<div *ngIf=toggleLoginHTML>
  <div style="text-align:center">
    <h1>
      TA Management System
    </h1>
  </div>
  <button onclick='validateLogin()'></button>
  <div style="text-align:center">
    <form action="javascript:validateLogin()">
      Email: <input type="email" name="email" value="email"><br>
      Password: <input type="password" name="password" value="password"><br>
      <input type="submit" value="Submit" onclick='validateLogin()'>
    </form>
  </div>
</div>

<div *ngIf=!toggleLoginHTML>
  <h1>
    Success
  </h1>
</div>

任何初学者的见解都将不胜感激，谢谢!

Answer 1

如 user184994 和 qiAlex 所说，您应该使用 Angular 内置的点击绑定(bind)，方法是使用 (click)="validateLogin()" 而不是 onclick。

但是我想建议您尝试查看 Angular Reactive Form Guide他们在其中很好地解释了如何在表单和模型之间实现直接绑定(bind)，并可能构建非常复杂的表单。另请查看 Form Validation Guide有关如何验证表单输入的更深入信息。