Ember.js 是一个流行的前端 JavaScript 框架，它提供了一种构建单页应用程序的方法。在构建一个 Ember.js 应用程序中，经常会用到嵌套的和表单输入字段。为了帮助开发人员有效地管理这些输入字段的状态，并处理错误和校验，ember-bootstrap-ds-error-validations 已经成为一个广泛使用的 npm 包。在本文中，我们将探讨 ember-bootstrap-ds-error-validations 的使用方法，以及如何在 Ember.js 应用程序中集成它。
安装
ember-bootstrap-ds-error-validations 是一个独立的 npm 包，可安装在您的 Ember.js 应用程序中。要安装，请在终端运行以下命令：
--- ------- ------------------------------------ ------
你还需要手动添加 CSS 文件。请确保使用 CSS 文件的正确版本（请参考“版本对应关系”）。
---- ---------------- ------------------------------------------------------------------------------------------------------------------------
使用
mixin 方法
首先，您需要导入该 package：
------ --------------------- ---- -----------------------------------------------------------------
然后，进一步创建一个 Mixin：
------ ------- ----------------------------------------- - ----------- --------------------- ---
layoutName 是你自定义 bs-input 的形式的控件名称。
Helper 方式
在 controller, component 或者 template 中导入原有的 Ember 原生帮助函数:
{{#bs-form model=model formLayout="horizontal" elementClassNames="row" action=validateAndSave as |form|}}
配置
您可以配置以下选项中的任何一个：
showError: 是否在加入了验证状态前就显示错误useIcons: 是否使用 icon font 来展示错误信息usePopover: 是否使用 bootstrap popover，来支持错误信息展示、默认为 trueshowHelpOnFocus: 是否离开当前输入框时，才展示帮助信息prefix: 配置输入项前缀suffix: 配置输入项后缀formGroupClass: 配置 form-group 的样式feedbackClass: 配置表单反馈的识别样式helpClass: 配置表单帮助文本的识别样式
您可以将配置项传递给 helper：
{{#bs-form model=model validateOn='focusOut' action=save as |form|}}
----------- --------- ------------------- ------------------ ------- ------------- --------------- -------------------- ---------------------- -------------
或混入：
------ --------------------- ---- ----------------------------------------------------------------- ----- - ----- ----- - - -----------------------------------------------------------
示例
创建一个表单，其中包含有一些输入字段以及一个提交按钮。我们首先需要在组件中导入该 mixin：
------ --------------------- ---- -----------------------------------------------------------------
使用 Ember CLI 命令创建并初始化组件：
----- -------- --------- -------
编辑 my-form.js 文件，我们将使用 DSBootstrapErrorMixin 来实现表单验证：
-- -------------------------
------ ----- ---- --------
------ --------------------- ---- -----------------------------------------------------------------
------ ------- --------------------------------------------- -
--------- ---------- -
-- -------
--
-------- -
----------- ---------- -
-- ----
----------------
-
-
---接下来，在 my-form.hbs 文件中添加表单标记，以及表单中的表单控件：
----- ------------------------------------ ----
---------- -------------- ------------- -- --------
--------------- ---------------
------- ------------ -------------------
-----------------
--------------- ------------------
------- --------------- ----------------------
-----------------
-----------------
-----------------------
------
-----------------------
-----------------
------------结论
本文重点介绍了 npm 包 ember-bootstrap-ds-error-validations，在 Ember.js 应用程序中使用它来处理表单字段的状态切换和校验。在 Ember.js 应用程序开发中，正确处理输入字段是非常重要的。使用 ember-bootstrap-ds-error-validations 可以帮助您更有效地处理状态和验证，并减少错误信息展示的难度。在您的下一个 Ember.js 应用程序中，尝试使用 ember-bootstrap-ds-error-validations 吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f7b238a385564ab6a20