Angular/Valdr - 将自定义类添加到 valdr-form-group答案

【问题标题】：Angular/Valdr - Add custom classes to valdr-form-groupAngular/Valdr - 将自定义类添加到 valdr-form-group
【发布时间】：2015-11-14 19:37:28
【问题描述】：

我对 Angular 很陌生。我正在使用 Valdr 在 Angular 中验证我的表单。当出现错误时，我想在表单组上添加一些带有我自己的 css 的自定义类。

在 Valdr 的文档中，我发现这部分是关于 CSS to control visibility 的。它说我需要注入 valdrClasses 并覆盖这些值。但是每次尝试我都会遇到错误。我尝试将其添加为模块/提供程序，但没有任何效果。

我的代码没有 valdrClasses：

angular.module('validators', ['valdr'])
  .config(function (valdrProvider, valdrMessageProvider) {
    valdrProvider.addConstraints({
      'User': {
        'name': {
          'required': {
            'message': 'Name is required.'
          }
        },
        'email': {
          'required': {
            'message': 'Email is required.'
          },
          'email': {
            'message': 'Must be a valid e-mail address.'
          }
        }
      }
    });

    valdrMessageProvider.setTemplate('<div class="help-block">{{ violation.message }}</div>');

  });

有人可以帮助我朝着正确的方向前进吗？因为我不知道如何注入和自定义 css 类。

【问题讨论】：

标签： css angularjs valdr

【解决方案1】：

将valdr 服务注入到例如控制器或运行块中并使用函数setClasses。

例如，如果您只想覆盖invalid：

app.run(function(valdr) {

  valdr.setClasses({
    invalid: 'my-invalid-class'
  });
});

演示： http://plnkr.co/edit/otLvNqXjRiJ4CGl8gDlu?p=preview

请注意，这可能取决于您使用的 Valdr 版本。

【讨论】：