在 MEAN Stack 中添加登录输入字段

在之前的模块中，我们成功地在我们的项目中实现了分页，并且已经构建了一个不错的应用程序。但是还缺少一件事，那就是身份验证。目前，我们没有用户，匿名用户创建我们的帖子。这意味着任何人都可以创建帖子、删除帖子和更新帖子。我们现在将限制访问，并确保每个人都可以阅读帖子，但不是每个人都可以创建或删除它们。只有帖子的创建者才能删除它们。我们将逐步进行，所以首先，我们将创建一个身份验证表单用于注册和登录。我们将使用以下步骤在我们的应用程序中添加注册和登录表单。

1) 我们将在 app 文件夹中创建一个新文件夹，并将其命名为 authentication。在文件夹中，我们将完成所有与身份验证相关的事情。

2) 在这个 authentication 文件夹中，我们将创建两个子文件夹，即 signup 和 login。在 login 文件夹中，我们将创建 typescript、HTML 和 CSS 文件。

3) 我们将导出一个名为 logincomponent 的类，就像我们之前创建的那样，并通过添加 @Component() 将这个类变成一个组件。我们将通过路由加载它，所以我们不需要向这个组件添加选择器。我们需要添加的是 templateURL，例如

4) 为了使用它，我们将注册它，我们将通过转到我们的 module.ts 文件来完成。在这个文件中，我们将声明 logincomponent 如下

5) 现在，我们将创建一个模板或登录表单。我们将创建一个带有电子邮件字段和密码字段的登录表单。我们将从 post-list.component.html 文件中复制代码，并将代码粘贴到 component.html 文件中。我们将对这段代码进行一些更改，以使这个表单对登录有效。

我们将在代码中进行以下更改

I. 我们将在 <ma-card> 中保留 spinner，因为我们希望拥有那种卡片外观，并且我们还希望在用户登录时显示 spinner。

II. 我们将删除 formGroup，因为我们将返回使用模板驱动方法。我们将更改我们的提交监听器，所以我们现在将删除调用函数。

III. mat-form-field 很好，matInput 很好，但是类型不好。我们将类型设置为 email。我们将删除 formControlName，因为我们不会使用响应式表单方法。placeholder 值将是电子邮件 ID，而不是“输入帖子标题”。

IV. 错误应该是“请输入有效的电子邮件 ID”，并且在这种情况下，条件将被更改，我们稍后将设置。

V. 我们将删除带有按钮的 div，以及带有图像上传器预览的 div，并在第二个 mat-form 字段上保留它。但是我们将删除 textarea，并用一个类型为 password 的输入字段代替它，因为我们想要隐藏字符。我们将添加 mat-input 指令，以将其转换为由 Angular material 处理的输入。我们还将添加一个占位符，即密码，因为它也可以用作标签。

VI. 现在，在 mat-error 字段中，需要重新访问 ngIf，所以我们稍后再做。我们将设置在 <mat-error></mat-error> 标签之间的错误将是 “请输入有效的密码”。在按钮中，按钮标题将被替换为登录。

6) 现在，我们将处理功能。我们将回到我们的 component.ts 文件，并为我们的 spinner 添加功能。在此之前，我们将通过在 app.module.ts 文件中添加 FormsModule 使模板驱动方法可用。

7) 现在，我们想通过路由加载它。所以，我们将转到我们的 app-routing.module.ts 文件，在那里，我们将添加一个新路径。当我们访问 /login 时，应该加载该路径，并且我们想在那里加载我们的 logincomponent。

8) 完成所有设置后，当我们输入 /login 时，我们应该能够访问它，但手动输入不是我们想要做的。所以，我们将转到 header 组件，并简单地添加一个新的链接或一个新的列表项，其中包含一个带有 mat-button 指令的锚标记，然后我们转到 /login，标题将是登录。

9) 现在，我们将确保这些链接在 header 组件中对齐，并且我们将转到 component.css 文件并为此编写 CSS 代码。

如果我们回到我们的 Angular 应用程序，我们将看到登录按钮在新的帖子旁边。

10) 我们需要更改表单的样式。所以，我们将创建 component.css 文件，在这里，我们将为我们的 mat-form-fields 编写 CSS 代码。

11) 我们将回到我们的 component.ts 文件，在这里，我们将通过添加 styleUrls 来包含新添加的样式文件。

现在，如果我们回到我们的 Angular 应用程序，我们的登录表单看起来会更好。

现在，我们的登录表单已经设计好了，但是它还没有做任何事情，因为我们没有处理用户输入。我们将在下一节中稍后执行此操作。