在 Angular 应用中如何优雅地处理表单验证

面试官：小伙子，你的代码为什么这么丝滑？

Angular 是一个流行的前端框架，Angular 应用通常需要表单，而表单需要验证，为了优化用户体验，我们需要在 Angular 应用中实现优雅的表单验证机制。这篇文章将介绍如何在 Angular 应用中实现优雅的表单验证，包括模板驱动和响应式表单检验的方法，以及使用自定义验证器和异步验证器的技巧。

模板驱动表单验证

在 Angular 应用中使用模板驱动表单，我们可以在模板中使用 Angular 表单指令来实现表单验证。Angular 表单指令包括以下几种：

  • ngModel：绑定输入框的值，同时可以给输入框添加验证器

  • ngForm：核心表单指令，管理一组 form controls 的状态、验证和值

  • ngControl：创建一个表单控件，可以直接访问其值、验证状态和发出变更事件

  • ngSubmit：监听表单提交事件

下面是一个示例代码，演示如何使用模板驱动表单验证：

----- ---------------- ------------------------------
  ---- -------------------
    ------ --------------------------------
    ------ ----------- ------------- --------------- --------------------
           -------- ------------- ---------------------------- --------------------
    ---- ----------------------- -- --------------- -- ------------------
         ------------ --------------
      ---- ---------------------------------
        -------- -- ---------
      ------
      ---- ----------------------------------
        -------- ---- -- -- ----- - ---------- -----
      ------
    ------
  ------

  ---- -------------------
    ------ --------------------------------
    ------ --------------- ------------- --------------- --------------------
           -------- ------------- ---------------------------- --------------------
    ---- ----------------------- -- --------------- -- ------------------
         ------------ --------------
      ---- ---------------------------------
        -------- -- ---------
      ------
      ---- ----------------------------------
        -------- ---- -- -- ----- - ---------- -----
      ------
    ------
  ------

  ------- ------------- ---------- ------------ -------------------------------------------
-------

在上面的代码中，我们使用了 ngForm 指令来创建一个核心表单对象，同时使用 ngModel 指令来绑定输入框的值和验证状态。我们还使用了 #username 和 #password 模板变量来引用输入框，这样就可以在模板中访问它们的验证状态。使用 *ngIf 指令来根据验证状态显示错误消息，在提交表单时，我们检查表单是否有效（即无验证错误）。

响应式表单验证

响应式表单是另一种 Angular 表单机制，让我们实现更高级的表单逻辑和验证。它允许我们以响应式编程的方式来处理表单，使用了 RxJS 观察者模式来订阅和管理表单元素的值和验证状态。响应式表单需要使用 FormControl、FormGroup 和 FormArray 等类来创建表单控件。我们可以在组件类中使用这些类来创建表单控件，然后将它们绑定到模板中。下面是一个响应式表单验证的示例代码：

------ - --------- - ---- ----------------
------ - ------------ ------------ ---------- ---------- - ---- -----------------

------------
  --------- ------------------------
  --------- -
    ----- ------------------------------ ------------------------
      ---- ------------------ ---------------------------------- -- ------------------
        ------ --------------------------------
        ------ ----------- ------------- -------------------------- ---------------------
        ---- ------------------ ---------------------- -- ------------------
          ---- ----------------------------------------- -- ---------------
          ---- ------------------------------------------ ---- -- -- ----- - ---------- -----------
        ------
      ------

      ---- ------------------ ---------------------------------- -- ------------------
        ------ --------------------------------
        ------ --------------- ------------- -------------------------- ---------------------
        ---- ------------------ ---------------------- -- ------------------
          ---- ----------------------------------------- -- ---------------
          ---- ------------------------------------------ ---- -- -- ----- - ---------- -----------
        ------
      ------

      ------- ------------- ---------- ------------
              ----------------------------------------------------
    -------
  --
  ------- ------------ ------------- - ------------- ---- ---
--
------ ----- ------------------------- -
  ----------------- ----------

  ------------------- --- ------------ -
    --------------------- - ----------
      ----------- --- --------------- --------------------- --------------------------
      ----------- --- --------------- --------------------- -------------------------
    ---
  -

  --- ---------- - ------ -------------------------------------- -
  --- ---------- - ------ -------------------------------------- -

  ---------- -
    -----------------------------------------
  -
-

在上面的代码中，我们使用了 FormControl、FormGroup 和 FormBuilder 来创建表单控件（即表单元素）。使用 FormControl 来创建单个表单控件，使用 FormGroup 来创建一组相关表单控件（即表单区域）。我们还使用了 FormBuilder 来简化表单控件的创建过程。

在模板中使用 [formGroup] 来绑定表单，使用 formControlName 来绑定单个表单控件。使用 *ngIf 来根据验证状态显示错误消息。我们还添加了一些 CSS 样式来显示验证错误样式。

自定义验证器

如果我们需要自定义表单验证逻辑，则可以创建自定义验证器。自定义验证器是一个函数，它会接收一个 AbstractControl（即表单控件）对象，并返回一个验证错误对象，如果验证通过，则返回 null。我们可以创建一个自定义验证器函数，并将它添加到表单控件的验证器列表中，如下所示：

------ - ---------------- ----------------- ----------- - ---- -----------------

------ -------- ------------------------------ -------- ----------- -
  ------ --------- ----------------- ---------------- - ---- -- -
    ----- --------- - ---------------------------
    ------ --------- - - ---------------- - ------ ------------- - - - -----
  --
-

在上面的代码中，我们创建了一个 forbiddenNameValidator 函数来验证表单元素的值是否与给定的正则表达式匹配。如果验证失败，则返回错误对象 { 'forbiddenName': { value: control.value } }。

然后，我们可以将 forbiddenNameValidator 函数添加到表单控件的验证器列表中，如下所示：

------ - --------- - ---- ----------------
------ - ------------ ------------ ---------- ---------- - ---- -----------------
------ - ---------------------- - ---- -----------------------------

------------
  --------- ------------------------
  --------- -
    ----- ------------------------------ ------------------------
      ---- ------------------ ---------------------------------- -- ------------------
        ------ --------------------------------
        ------ ----------- ------------- -------------------------- ---------------------
        ---- ------------------ ---------------------- -- ------------------
          ---- ----------------------------------------- -- ---------------
          ---- ------------------------------------------ ---- -- -- ----- - ---------- -----------
          ---- ---------------------------------------------- ------ ------- ------------
        ------
      ------

      ---- ------------------ ---------------------------------- -- ------------------
        ------ --------------------------------
        ------ --------------- ------------- -------------------------- ---------------------
        ---- ------------------ ---------------------- -- ------------------
          ---- ----------------------------------------- -- ---------------
          ---- ------------------------------------------ ---- -- -- ----- - ---------- -----------
        ------
      ------

      ------- ------------- ---------- ------------
              ----------------------------------------------------
    -------
  --
  ------- ------------ ------------- - ------------- ---- ---
--
------ ----- ------------------------- -
  ----------------- ----------

  ------------------- --- ------------ -
    --------------------- - ----------
      ----------- --- --------------- -
        --------------------
        ------------------------
        -----------------------------
      ---
      ----------- --- --------------- -
        --------------------
        -----------------------
      --
    ---
  -

  --- ---------- - ------ -------------------------------------- -
  --- ---------- - ------ -------------------------------------- -

  ---------- -
    -----------------------------------------
  -
-

在上面的代码中，我们将 forbiddenNameValidator 函数添加到 username 表单控件的验证器列表中。如果用户名包含 'foo'，则表单验证将失败，并显示错误消息。

异步表单验证器

有时，我们需要在 Angular 表单中实现异步表单验证逻辑，例如，从服务器端验证用户名是否已经被占用。在这种情况下，我们需要使用异步表单验证器。

异步表单验证器是一个返回 Observable 或 Promise 的函数。当有数据改变时，Angular 将调用异步验证器并等待它返回可观察对象的结果。如果观察到错误，则认为表单验证失败。

下面是一个示例异步验证器的代码：

------ - ---------------- --------------- ---------------- - ---- -----------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------

------ ----- ----------------------- ---------- -------------- -
  ----------------- ----------------- ------------------------ - ----- - --------------------------- - ----- -
    ------ ---------------------------------------
      ----------- -- -------- - - ---------------- ---- - - ------
    --
  -

  ----------------------- -------- ------------------- -
    ------ --------------------------- -- -------- ---- -------
  -
-

异步验证器的核心是在 validate 方法中进行异步验证。在上面的代码中，我们简单地使用 checkUsername 方法模拟了一个 HTTP 请求，该方法返回一个具有延迟的可观察对象。我们使用 map 运算符来转换结果，根据结果返回验证错误消息或 null。

然后，我们可以将异步验证器添加到表单控件的验证器列表中，如下所示：

------ - --------- - ---- ----------------
------ - ------------ ------------ ---------- ---------- - ---- -----------------
------ - ----------------------- - ---- ------------------------------

------------
  --------- ------------------------
  --------- -
    ----- ------------------------------ ------------------------
      ---- ------------------ ---------------------------------- -- ------------------
        ------ --------------------------------
        ------ ----------- ------------- -------------------------- ---------------------
        ---- ------------------ ---------------------- -- ------------------
          ---- ----------------------------------------- -- ---------------
          ---- ------------------------------------------ ---- -- -- ----- - ---------- -----------
          ---- ---------------------------------------------- -- ------- ------------
        ------
      ------

      ---- ------------------ ---------------------------------- -- ------------------
        ------ --------------------------------
        ------ --------------- ------------- -------------------------- ---------------------
        ---- ------------------ ---------------------- -- ------------------
          ---- ----------------------------------------- -- ---------------
          ---- ------------------------------------------ ---- -- -- ----- - ---------- -----------
        ------
      ------

      ------- ------------- ---------- ------------
              ----------------------------------------------------
    -------
  --
  ------- ------------ ------------- - ------------- ---- ---
--
------ ----- ------------------------- -
  ----------------- ----------

  ------------------- --- ------------
              ------- ------------------------ ------------------------ -
    --------------------- - ----------
      ----------- --- --------------- -
        --------------------
        -----------------------
      -- ------------------------------------------------------------------
      ----------- --- --------------- -
        --------------------
        -----------------------
      --
    ---
  -

  --- ---------- - ------ -------------------------------------- -
  --- ---------- - ------ -------------------------------------- -

  ---------- -
    -----------------------------------------
  -
-

在上面的代码中，我们将 UniqueUsernameValidator 类的实例传递给组件构造函数，并将其添加到 username 表单控件的验证器列表中。在 asyncValidator 列表中添加异步验证器时，我们需要将验证器函数绑定到其实例上。如果 UniqueUsernameValidator 的 validate 方法返回的观察对象发出 usernameTaken 错误，则表单验证失败，并显示错误消息。

结论

在 Angular 应用中实现优雅的表单验证需要使用 Angular 内置表单指令和响应式表单机制。我们还可以添加自定义验证器和异步验证器来实现更复杂的验证逻辑。希望本文对你有所帮助，如果你有其他有关 Angular 的问题，可以访问 Angular 官网 获取更多信息。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670a0de4d91dce0dc87e2baa

阅读全文

猜你喜欢

  • Hapi 框架应用中使用 Mongoose 做数据模型：完全指南

    在现代 web 应用中，数据是至关重要的，而数据库则是存储和管理数据的核心。对于 Node.js 来说，Mongoose 是一种非常常用的数据库模型工具，它基于 MongoDB，可以帮助我们在应用程序...

    6 天前
  • redux-thunk 的简单使用

    Redux 是一个管理状态的强大库，并且与 React 结合使用效果更佳。我们可以轻易地将应用程序的状态存储在 Redux store 中，并在需要时调用。然而，在某些情况下，我们需要更多的控制权来处...

    6 天前
  • CSS Reset 带来的风格或误区

    CSS Reset 是前端开发中经常使用的一种技术，它可以帮助开发者在不同的浏览器中实现样式的一致性。然而，CSS Reset 也会带来一些风格或误区，本文将深入探讨它们的原因和对开发的影响。

    6 天前
  • 如何使用 Headless CMS 实现多渠道内容分发和展示

    前言 在当今数字化时代，人们越来越希望从不同的渠道获取内容。这包括电子商务网站、智能手机应用程序、智能音箱和视频游戏等。然而，这些不同的渠道需要不同的技术架构和方法来管理并展示内容。

    6 天前
  • MongoDB 分布式集群的实现及配置详解

    MongoDB 是当今非常流行的 NoSQL 数据库之一，因为它提供了一些独特的优势：高性能、可扩展性、易于使用的 API 等等。对于需要处理大量数据的应用程序而言，MongoDB 是一个非常好的选择...

    6 天前
  • 前端性能优化技术和工具

    在当今日益重视用户体验的时代，提高网站性能优化已经成为前端开发的重要任务之一。本文将介绍一些基本的性能优化技术和工具，以帮助您提升网站的访问速度和用户体验。 1. 前端优化技术 1.1. 图片优化 图...

    6 天前
  • WebSocket 和 Socket.io 的区别以及优劣分析

    什么是 WebSocket 和 Socket.io WebSocket 是一种使客户端和服务器之间保持双向通信的协议。通过 WebSocket，应用程序可以以低延迟和高效的方式发送和接收数据。

    6 天前
  • Node.js 中的 HTTP 请求流畅处理

    前言 在 Node.js 开发中，HTTP 请求是不可避免的一部分。处理请求的过程中，我们需要确保性能高效，并且保证数据的完整性。本文将介绍如何使用 Node.js 处理 HTTP 请求，并展示如何优...

    6 天前
  • PM2 进程启动时出现 “Error: Cannot find module” 错误的解决方案

    背景 在前端开发中，我们通常使用 PM2 工具来进行进程管理。它可以帮助我们快速启动、停止、重启、监视进程等。但有时在启动进程时会出现 “Error: Cannot find module” 的错误，...

    6 天前
  • 优化 Fastify 中的缓存机制

    前言 在现代 web 应用中，服务端缓存的作用越来越重要，它可以显著提升网站的性能和用户体验。Fastify 是一个相对较新的 Node.js Web 框架，它以其快速的路由性能而闻名。

    6 天前
  • 使用 Koa2 实现邮件发送

    在 Web 应用程序开发中，邮件发送是许多应用程序必须支持的功能之一。使用 Node.js 编写 Web 应用程序的开发人员通常会选择使用 Koa2 来实现邮件发送功能。

    6 天前
  • MongoDB 集群架构的优化与实时监控

    前言 作为目前最受欢迎的 NoSQL 数据库之一，MongoDB 在实际生产环境中的应用越来越广泛。然而，随着数据量的不断增长和服务负载的增加，单个 MongoDB 实例的性能和可靠性将变得不足以满足...

    6 天前
  • Performance Optimization 为你的 Angular 应用程序提供性能提升

    随着Angular在前端应用程序中的广泛应用，性能问题已成为一个日益突出的问题。本文将介绍如何通过一系列的技术手段来优化你的Angular应用程序的性能，旨在帮助你提高用户体验，减少加载和响应时间，实...

    6 天前
  • Socket.io 在实时数据同步中的优势和应用

    前言 在现代 Web 应用程序中，实时数据同步已成为必不可少的功能。例如，我们在开发聊天室、在线游戏、即时通讯等应用程序时，都需要使用实时数据同步技术。 在实时数据同步过程中，我们需要将服务器上的数据...

    6 天前
  • React Native SPA 应用如何在 iOS 和 Android 下实现页面切换时的流畅效果？

    如果你正在开发一个 React Native 的 SPA 应用，那么实现流畅的页面切换效果是一个很重要的问题。虽然 React Native 在跨平台方面表现出色，但是在实现页面切换时，不同平台的性能...

    6 天前
  • Tailwind CSS 快速入门

    什么是 Tailwind CSS Tailwind CSS 是一个了不起的 CSS 工具箱，它使用一组可重复使用的现成类来快速构建现代 web 界面，同时提供了大量的定制化选项以满足个性化需求。

    6 天前
  • 如何通过 RESTful API 实现用户注册与登录

    在现代的 Web 应用程序中，用户身份认证及授权是非常重要的功能。RESTful API 是一种用于设计 Web 服务的架构风格，用于创建和消费网络服务。本文将详细讨论如何使用 RESTful API...

    6 天前
  • 如何使用 Cypress 进行可访问性测试

    随着移动设备和智能家居的普及，我们越来越依赖于互联网。但是，我们必须确保这些产品和服务对所有访问者都可用，不管他们是否有视觉或听觉障碍。这就是可访问性测试的重要性所在。

    6 天前
  • SSE与Websocket的性能和优化分析

    介绍 SSE(Server-Sent Events)和Websocket是两种实现服务器与客户端实时通讯的技术。SSE使用HTTP协议，而Websocket则是一种自定义协议。

    6 天前
  • ECMAScript 2017 中的 Object.getOwnPropertyDescriptors 方法解决对象属性描述符的问题

    在前端开发中，经常需要对对象的属性进行定义和操作，包括属性的访问状态、读写状态、枚举性等等。对象属性描述符就是用来定义这些属性的详细信息的方法，而在 ECMAScript 2017 中，加入了一个新的...

    6 天前

相关推荐

    暂无文章