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

Question

我对 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 类。

Answer 1

将valdr服务注入例如控制器或运行块中并使用该功能setClasses。

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

app.run(function(valdr) {

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

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

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