在AngularJS中重用ngClass指令

Question

我正在尝试验证表单,并且html页面中的逻辑太多了.我已经在使用ngMessages了,因为没有它就没那么绝望了.

我正在做像这样的ng-class的对象变体

ng-class="{ 'has-error' : registerForm.username.$invalid && registerForm.username.$touched, 'has-success' : registerForm.username.$valid && registerForm.username.$touched }"

正如您所看到的,上面已经有很多代码了.我必须使用这个指令6次,所以我现在看来唯一的选择就是将它粘贴到其他5个地方.我尝试过这样的事情但是没有用

<form ng-init="formGroupClassObject = { 'has-error' : registerForm.username.$invalid && registerForm.username.$touched, 'has-success' : registerForm.username.$valid && registerForm.username.$touched }">

<div class="form-group" ng-class="formGroupClassObject"></div>

我不明白为什么这不起作用.您对上述代码的重用能力有任何其他建议吗？

Answer 1

怎么样：

ng-class="getFormClasses(registerForm)"

在你的通用控制器中：

$scope.getFormClasses = function(form) {
  if (!form) { return; }
  return {
    'has-error'  : form.username.$invalid && form.username.$touched,
    'has-success': form.username.$valid   && form.username.$touched
  }
};

如果您使用ng-init，则当表单有效性更改时，类将不会更新。