在 MEAN Stack 中使用表单

在上一节中，我们学习了如何创建模型以及如何在应用程序中使用它。之前，我们使用双向绑定创建帖子，这并非绝对错误，但 Angular 使处理表单变得非常容易。表单非常有用，我们将按以下方式使用它们

1) 我们将转到 post-create.component.html 文件并添加表单，即普通的 html 元素。我们按以下方式用它包裹 <mat-form-field> 和 button

因此，无需使用双向绑定。我们已经包含了表单模块，因此当它检测到 form 元素时，它会自动在后台创建一个 JavaScript 对象，表示此表单。在表单中，我们可以轻松地将输入注册为控件，然后存储这些控件的值。在这里，我们可以轻松地添加验证并提交表单以使用该表单的值。

2) 我们通过简单地用 ngModel 覆盖 [(ngModel)] = "enteredTitle" 和 [(ngModel)] = "enteredContent" 来摆脱双向绑定。ngModel 将把输入注册为控件。但是，Angular 需要知道如何命名此输入，我们添加了 name 属性并赋予了我们想要的任何名称，如下所示

3) 现在，当我们单击按钮时，我们不需要手动调用 onAddPost() 函数。我们将此按钮设置为 submit 类型，因为我们正在使用表单。类型为 submit 的按钮将提交表单。它将触发一个特殊事件，即 submit 事件，我们可以监听该事件，在这里我们将执行我们的 onAddPost() 函数，如下所示

4) 现在，我们需要访问表单中的值，我们将通过使用本地引用来实现。因此，我们将向表单添加一个引用并为其赋予任何名称，如下所示

我们将引用传递给 onAddPost() 函数。#postForm 将使我们能够访问 html 元素对象，并且我们必须将 ngForm 分配为其值。这是一个指令，Angular 隐式地将其附加到表单元素。

5) 现在，我们将返回到我们的 post-create.component.ts。onAddPost() 函数将接收表单，该表单实际上是 ngForm 类型，如下所示

这个 NgForm 包含有关表单的很多信息，例如它是否有效。

6) 此 NgForm 使我们能够访问表单的值。我们将按以下方式从表单中访问标题和内容的值

现在，如果我们保存它并在浏览器上运行它，它也会像这样接受 null 值

7) 因此，我们需要通过简单地在文本输入和文本区域中添加所需的验证来添加验证。通过添加此功能，Angular 将自动检测到此情况并更新其表单对象以反映其是否有效，并且这将按以下方式添加

我们还会检查表单是否有效。如果无效，我们只需在 post-create.component.ts 文件中添加 return 语句，如下所示

现在，我们保存并运行它。它看起来不错，就像这样

8) 现在，我们可以通过使用 Angular Material 轻松添加错误消息。我们将使用以下语法来显示错误消息

现在，我们在代码中使用此语法，为此，我们需要访问输入。我们有两种方法可以访问输入。

1. 我们可以访问我们的 postForm 并调用 getControl 函数，在该函数中我们将输入的名称作为参数传递，如下所示

2. 我们可以向该输入添加一个本地引用，并将其设置为 ngModel。这将使我们能够访问该输入管理的数据，然后我们可以使用它来显示错误消息，如下所示

我们将对文本区域执行相同的操作。

我们保存它并在 ng serve 上运行它。我们将在浏览器上看到错误消息，如下所示

在下一节中，我们将学习如何将帖子从 post-create 组件获取到 post-list 组件。