在 MEAN Stack 中处理用户输入

在之前的章节中，我们成功地实现了登录表单。之前，我们的表单没有做任何事情，因为我们没有处理用户输入。所以，在本节中，我们将实现表单的功能并处理用户输入。我们将使用以下步骤来处理用户输入

1) 在我们实现表单的 login.component.html 文件中，我们仍然监听提交事件并调用 onlogin() 方法。但是，在那里，我们需要手动提交对 angular 管理的表单对象的引用。我们将通过添加一个本地引用并将其设置为 ngForm 来做到这一点，然后我们将登录表单传递给 onlogin() 方法，如下所示

2) 我们还想为我们的输入添加本地引用，例如电子邮件输入，以便我们可以在 ngIf 中使用它们。我们需要为引用分配一个值，这将是 ngModel。我们需要首先将 name 属性和 ngModel 添加到输入中。

3) 现在，输入可以访问由 angular 控制的底层对象，并且我们可以使用 ngIf 来检查电子邮件输入是否有效。如果无效，它将显示错误。我们还将向输入中添加必需的电子邮件验证器。

4) 以同样的方式，我们将为密码输入字段做所有事情。我们使用引用来检查密码是否有效。

现在，如果我们返回到我们的 angular 应用程序，验证器将被附加，如果我们输入类似 test 的内容，它将显示**请输入有效的电子邮件**错误。

5) 现在，我们将在 **component.ts** 文件中创建 onlogin() 方法，在这里我们将获取表单对象作为参数，该参数的类型为 NgForm。在此方法中，我们将简单地 console.log 表单值以确保一切正常。

现在，我们保存它并返回到我们的 angular 应用程序。如果我们尝试提交表单，我们将在控制台上获得值。