Angular 表单验证不允许空格

在本节中，我们将学习关于表单验证。在这个表单中，我们不允许任何空格。我们将使用 Angular 来实现这一点。很多时候，我们的应用程序需要一个表单，该表单接受不带任何空格的输入。在我们的响应式表单中，我们可以使用自定义验证来不允许空格。使用此自定义验证，我们可以轻松验证不允许空格。为了验证不允许空格，我们可以使用各种 Angular 版本，如 Angular 6、7、8、9、10 和 11。

如果我们尝试通过使用“if 条件”或任何其他方式为不允许任何空格添加验证。但是这种方式非常困难。所以我们找到了一种简单的方法来验证不允许空格。我们将创建自定义验证，其中包含许多规则来验证这一点。在我们的以下示例中，将创建新的自定义验证，该验证将不允许输入字段包含空格。在我们的表单中，用户名将不允许输入带有空格。为了做到这一点，我们必须遵循一些步骤，如下所述

步骤 1

在此步骤中，我们将安装 Angular 应用程序。在这里，我们将创建一个新的 ng-app。如果我们已经创建了 Angular 应用程序，则不需要创建它。为了创建新的 ng-app，将使用以下命令，如下所示

步骤 2

在此步骤中，我们将导入 FormsModule。在我们的 Angular 应用程序中，我们需要创建一个表单。我们将使用 @angular/forms 库来导入它。现在我们将使用名为 app.module.ts 的文件并将以下代码添加到其中

src/app/app.module.ts

步骤 3

在此步骤中，我们将使用 ngModel 创建表单。在这里，将编写 HTML 表单的代码。在这个表单中，我们将使用 Bootstrap 类。如果我们没有 Bootstrap，我们可以使用以下链接在我们的系统中安装它

angular-7-with-bootstrap!

现在我们将使用名为 app.component.html 的文件并将以下代码添加到其中，如下所示

src/app/app.component.html

步骤 4

在此步骤中，我们将更新 Ts 文件。此文件用于编写 submit()。它还用于获取输入字段的所有值。现在我们将使用名为 app.component.ts 的文件并将以下代码添加到其中，如下所示

src/app/app.component.ts

步骤 5

在此步骤中，我们将创建自定义验证文件。在这里，我们将创建一个名为“username.validator.ts”的自定义文件，然后我们将以下代码添加到其中，如下所示

src/app/username.validator.ts

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出