npm 包 ember-bootstrap-ds-error-validations 使用教程-JavaScript中文网-JavaScript教程资源分享门户

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 应用程序中。要安装，请在终端运行以下命令：

npm install ember-bootstrap-ds-error-validations --save

你还需要手动添加 CSS 文件。请确保使用 CSS 文件的正确版本（请参考“版本对应关系”）。

link rel="stylesheet" href="https://cdn.jsdelivr.net/ember-bootstrap-ds-error-validations/1.0.2/ember-bootstrap-ds-error-validations.min.css">

使用

mixin 方法

首先，您需要导入该 package：

import DSBootstrapErrorMixin from 'ember-bootstrap-ds-error-validations/mixins/ds-bootstrap-error';

然后，进一步创建一个 Mixin：

export default Ember.Mixin.create(DSBootstrapErrorMixin, {
  layoutName: 'components/bs-input'
});

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，来支持错误信息展示、默认为 true
showHelpOnFocus: 是否离开当前输入框时，才展示帮助信息
prefix: 配置输入项前缀
suffix: 配置输入项后缀
formGroupClass: 配置 form-group 的样式
feedbackClass: 配置表单反馈的识别样式
helpClass: 配置表单帮助文本的识别样式

您可以将配置项传递给 helper：

{{#bs-form model=model validateOn='focusOut' action=save as |form|}}

{{#bs-input form=form property='username' label='Username'}}
  {{input id='username' name='username' value=model.username class='form-control'}}
{{/bs-input}}

或混入：

import DSBootstrapErrorMixin from 'ember-bootstrap-ds-error-validations/mixins/ds-bootstrap-error';
const { Form, Input } = require('ember-bootstrap-ds-error-validations/components');

示例

创建一个表单，其中包含有一些输入字段以及一个提交按钮。我们首先需要在组件中导入该 mixin：

import DSBootstrapErrorMixin from 'ember-bootstrap-ds-error-validations/mixins/ds-bootstrap-error';

使用 Ember CLI 命令创建并初始化组件：

ember generate component my-form

编辑 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