npm 包 ng4-form-fields 使用教程

前言

ng4-form-fields 是一个方便 Angular 4+ 开发者快速集成表单元素的 npm 包。在开发中，我们总会需要使用到表单元素，如输入框、下拉框、复选框等。而 ng4-form-fields 帮助我们快速集成这些元素，减少了我们的重复劳动，提升了开发效率。本文将详细介绍使用 ng4-form-fields 的方法，包含安装、引入、使用以及示例代码等内容。

安装

使用 ng4-form-fields 前，需要在控制台执行以下命令进行安装：

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

引入与配置

在 Angular 4+ 项目中，需要在 app.module.ts 中引入 FormsModule 和 ReactiveFormsModule。

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

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

引入 ng4-form-fields。

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

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

这里我们需要注意，Ng4FormFieldsModule 需要在 FormsModule 和 ReactiveFormsModule 后进行导入，否则编译器将无法识别 ngform、formGroup 等指令（关于这点具体请参考 Angular 官方文档关于指令的说明）。

使用方法

在这里，我们将介绍两种方式使用 ng4-form-fields，一种是在 template 中使用，另一种是在 ts 中使用 FormGroup 实现。

在 template 中使用

在 template 中使用 ng4-form-fields 做法类似于 Angular 自带的表单元素，我们需要使用 ngFormControl 指令定义一个 FormControl 并绑定到相应的表单元素上。

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

上述代码中，我们定义了两个 FormControl，name 和 age 分别对应两个 input 元素。

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

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

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

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

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

在 ts 中，我们使用 FormBuilder 来创建表单控制器 FormGroup，并将它绑定到模板中。需要注意的是，这里与 Angular 自带的表单输入框不同，我们需要事先定义好 FormControl，并通过这些 FormControl 绑定模板中的表单元素。

在 ts 中使用 FormGroup

在 ts 中使用 FormGroup 实现表单元素与 FormControl 的绑定，可以提高代码的复用性。

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

这里，我们需要使用 formControlName 指令指定一个控件名，使表单元素和之前定义好的 FormControl 绑定。

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

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

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

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

这里我们使用 new 关键字来创建 FormControl，再使用 FormGroup 来将它们组合成一个表单控制器。

代码示例

最后，为了能够更好地掌握 ng4-form-fields 的使用方法，推荐阅读官方文档并对其中的示例代码进行模仿和练习。以下为官方给出的一个简单的示例：

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

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

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

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

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

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

以上示例展示了 ng4-form-fields 支持的三种表单元素：输入框、单选框、复选框。通过 ngFormControl 指令将它们与之前定义好的 FormControl 绑定，并提交表单数据。

总结

ng4-form-fields 是一个简单而方便的 npm 包，它可以帮助我们快速完成对表单元素的集成，提高开发效率。希望本文能够为读者提供完整、详实的使用指导，并能够更好地运用 ng4-form-fields 进行开发。

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

阅读全文

猜你喜欢

  • NPM包docker-blend使用教程

    简介 Node Package Manager，即NPM，是一个基于Node.js的包管理器。它是用于查找、共享、并安装这些模块的最大的代码库。一般来说，它用于JavaScript包的分发和管理，尤其...

    3 年前
  • npm包 is-this-correct 使用教程

    介绍 is-this-correct是一个npm包，可以用于判断输入的字符串是否符合指定的格式。它非常易于使用，能够大大提高开发效率。本文将为大家详细介绍 is-this-correct的使用方法，帮...

    3 年前
  • npm 包 syncshell 使用教程

    简介 syncshell 是一个命令行工具，可以在多个终端间同步命令输入和输出。它可以使得多个开发者在协作开发时，快速地共享操作指令和结果，避免因为沟通不畅而产生的误差和重复的劳动。

    3 年前
  • npm 包 @ahutchings/http-browserify-worker-support 使用教程

    在前端应用中，我们经常需要向后端服务器发送 HTTP 请求获取数据。在传统的实现方式中，通常使用浏览器原生的 XMLHttpRequest 或者 fetch API 进行发送请求。

    3 年前
  • npm 包 roc-cli-library 使用教程

    如果你是一个前端开发者，你一定对 npm 这个包管理器很熟悉了。它可以让我们轻松地安装和管理各种 JavaScript 包和工具。而 roc-cli-library 就是其中一个非常实用的 npm 包...

    3 年前
  • npm 包 cerebro-fileio 使用教程

    什么是 cerebro-fileio ? cerebro-fileio 是一个能够在浏览器和 Node.js 中处理文件读写的 npm 包。它提供了一个简单而优雅的 API，使得文件的读写和处理变得非...

    3 年前
  • npm 包 cishower 使用教程

    简介 cishower 是一个基于 reveal.js 的演示文稿框架，它提供了许多特性和自定义程度，让演示文稿实现起来更加灵活和方便。本教程将介绍 cishower 的基本使用和一些高级功能。

    3 年前
  • npm 包 list-tweaker 使用教程

    在前端开发中，使用 npm 包时经常需要查看当前项目所安装的包列表，然而默认的列表显示并不直观，往往需要耗费较多时间去查找特定的包。npm 包 list-tweaker 就是一款能够提升 npm 包列...

    3 年前
  • npm 包 peshitta-concordance 使用教程

    在前端开发中，我们常常需要进行文本分析和数据挖掘，而 peshitta-concordance npm 包提供了一个非常便捷的方法，帮助我们实现基于新约希腊文圣经的文本分析和挖掘。

    3 年前
  • npm 包 webagent 使用教程

    前言 在前端开发中，我们经常需要模拟浏览器行为进行网络请求，爬取网页数据等操作，而 webagent 可以很好地解决这个问题。webagent 是一个基于 Node.js 的轻量级网络爬虫框架，它能够...

    3 年前
  • npm包redux-fast-actions使用教程

    介绍 在现代前端开发中，状态管理已经成为了一个必不可少的核心概念。Redux作为当前最流行的状态管理库，已经被广泛使用。但是，Redux本身是一个简洁的库，需要开发者编写大量的重复代码来管理actio...

    3 年前
  • npm包alfred-kubernetes使用教程

    前言 随着云计算和容器化技术的兴起，Kubernetes已经成为云原生应用开发的最佳实践之一。而我们在Kubernetes集群进行开发时，一定要使用好工具来提升开发效率。

    3 年前
  • npm 包 serverless-plugin-splunk 使用教程

    serverless-plugin-splunk 是一个 npm 包，它可以帮助开发人员将 Serverless 应用程序日志数据发送到 Splunk 服务器。该插件可以轻松地与 Serverless...

    3 年前
  • npm 包 appaloosa-client 使用教程

    前言 在移动开发领域，App 升级和分发是一项重要的工作。Appaloosa 是一家提供企业级 App 管理服务的公司，旗下的 appaloosa-client npm 包为移动开发者提供了便利的方式...

    3 年前
  • npm 包 draft-js-side-toolbar-plugin-2 使用教程

    什么是 draft-js-side-toolbar-plugin-2？ draft-js-side-toolbar-plugin-2 是一个用于 Draft.js 编辑器的插件，它可以在编辑器侧边栏中...

    3 年前
  • npm 包 ferwalker_platzom 使用教程

    在前端开发中，我们经常需要处理各种字符串。ferwalker_platzom 是一个 npm 包，可以帮助我们对字符串进行一些处理，例如变换大小写、去掉辅音字母等。

    3 年前
  • npm 包 hootsuite-rest 使用教程

    前言 随着前端技术的不断发展，Node.js已经成为了前端工程师必备的技能之一，而npm是前端包管理器的代表，方便我们快速地查找、安装、使用各种包，今天我们就来学习一下npm包hootsuite-re...

    3 年前
  • npm 包 gulp-inline-oaosource 使用教程

    前言 随着前端开发的日益成熟，现在越来越多的开发者开始将前端工程化。在前端工程化的过程中，npm 成为必不可少的工具之一。gulp-inline-oaosource 就是其中一种非常实用的 npm 包...

    3 年前
  • npm 包 minside-intl-polyfill-server 使用教程

    在前端开发中，由于项目国际化需求的增加，我们可能需要使用一些国际化相关的 javascript 库来帮助我们实现国际化功能。其中，minside-intl-polyfill-server 就是一个非常...

    3 年前
  • npm 包 eslint-config-landscape-hub 使用教程

    在前端开发中，我们经常需要使用 ESLint 这个工具来对代码进行检查和格式化。但对于团队来说，需要对规则进行统一配置，避免每个人都单独配置，浪费时间和精力。而 eslint-config-lands...

    3 年前

相关推荐

    暂无文章