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，则表单有效性更改时不会更新类。

在AngularJS中重用ngClass指令

1 个答案: