angular-bootstrap-show-errors, Bootstrap的Angular 指令以智能显示表单验证错误

分享于 

7分钟阅读

GitHub

  繁體 雙語
An Angular directive for Bootstrap to intelligently show form validation errors
  • 源代码名称:angular-bootstrap-show-errors
  • 源代码网址:http://www.github.com/paulyoder/angular-bootstrap-show-errors
  • angular-bootstrap-show-errors源代码文档
  • angular-bootstrap-show-errors源代码下载
  • Git URL:
    git://www.github.com/paulyoder/angular-bootstrap-show-errors.git
    Git Clone代码到本地:
    git clone http://www.github.com/paulyoder/angular-bootstrap-show-errors
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/paulyoder/angular-bootstrap-show-errors
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Angular Bootstrap 显示错误

    Bootstrap 3的Angular 指令,智能地将'有错误'类应用于无效的表单字段。

    查看AngularJS中正确完成的 Bootstrap 表单验证阅读有关使用这里指令的好处。

    安装

    使用 Bower

    
    bower install angular-bootstrap-show-errors
    
    
    
    

    手工

    src/showErrors.js 或者 src/showErrors.min.js 文件复制到你的项目中。

    快速启动

    • 在 Angular 应用程序中包含 ui.bootstrap.showErrors 模块
    angular.module('yourApp', ['ui.bootstrap.showErrors']);
    • 在包含 form-group 类的div元素上添加 show-errors 属性
    <formname="userForm">
     <divclass="form-group"show-errors>
     <inputtype="text"name="firstName"ng-model="firstName"ng-required/>
     </div>
    </form>
    • 如果你想避免 form-group的额外底层 margin,你可以使用 input-group
    <formname="userForm">
     <divclass="input-group"show-errors>
     <inputtype="text"name="firstName"ng-model="firstName"ng-required/>
     </div>
    </form>

    强制有效性检查

    默认情况下,这里指令不检查有效性,直到用户关闭输入元素。 但是,有时你想要显示无效的表单元素,即使用户没有关闭标签。 ( 比如。保存表单之前)

    若要强制进行有效性检查,请广播 show-errors-check-validity 事件。

    示例
    <formname="userForm">
     <divclass="form-group"show-errors>
     <inputtype="text"name="firstName"ng-model="firstName"ng-required/>
     </div>
     <inputtype="submit"ng-click="save()"/>
    </form>
    $scope.save=function() {
     $scope.$broadcast('show-errors-check-validity');
     if ($scope.userForm.$valid) {
     // save the user }
    }

    复位

    如果你有重置表单的功能,可以广播'show-errors-reset'事件以删除表单元素中的任何错误。

    示例
    <formname="userForm">
     <divclass="form-group"show-errors>
     <inputtype="text"name="firstName"ng-model="firstName"ng-required/>
     </div>
     <ahref="#"ng-click="reset()">Reset</a>
    </form>
    $scope.reset=function() {
     $scope.$broadcast('show-errors-reset');
    }

    显示有效条目

    还可以通过应用 Bootstrap 提供的'显示成功'类,让用户知道什么时候输入了有效值。 你可以按元素全局应用这里方法,也可以按元素。

    全局

    以下示例显示如何在使用showErrors指令的每个输入上显示有效值。

    app =angular.module('yourApp', ['ui.bootstrap.showErrors']);app.config(['showErrorsConfigProvider', function(showErrorsConfigProvider) {
     showErrorsConfigProvider.showSuccess(true);
    }]);
    输入元素

    如果只希望在特定输入上显示有效值,则可以通过 { showSuccess: true } 如 below 示例所示的选项。

    <formname="userForm">
     <divclass="form-group"show-errors="{ showSuccess: true }">
     <inputtype="text"name="firstName"ng-model="firstName"ng-required/>
     </div>
    </form>

    跳过表单组检查

    如果HTML代码没有表单组类,则可以跳过表单组检查:

    <formname="userForm">
    <divshow-errors="{ skipFormGroupCheck: true }">
    <inputtype="text"name="firstName"ng-model="firstName"ng-required/>
    </div>
    </form>

    自定义触发器

    默认情况下,在输入元素上的blur 事件触发之前,不会执行验证。 但是,有一些场景不需要这样做,因这里可以通过 trigger 选项重写这个方案。

    输入元素
    <formname="userForm">
     <divclass="form-group"show-errors="{ trigger: 'keypress' }">
     <inputng-model="firstName"ng-pattern="/^foo$/"ng-requiredname="firstName"class="form-control"type="text"/>
     </div>
    </form>
    全局
    app =angular.module('yourApp', ['ui.bootstrap.showErrors']);app.config(['showErrorsConfigProvider', function(showErrorsConfigProvider) {
     showErrorsConfigProvider.trigger('keypress');
    }]);

    插件开发

    安装开发依赖项

    开始开发之前,你需要安装所需的node 模块和 Bower 组件。 为此,在项目目录中打开一个终端窗口并运行以下命令。

    
    npm install
    
    
    bower install
    
    
    
    

    编译并运行单元测试

    只要在 命令行 中输入 grunt 即可编译和运行 Karma 单元测试一次。

    如果希望对任何文件更改进行grunt监视并自动编译并运行 Karma 单元测试,请运行以下命令:

    
    grunt karma:continuous:start watch
    
    
    
    

    for  BOO  angular  form  引导  DIR  
    相关文章