Question

我有一个场景，我必须检测Angular表单中的某些字段是否有效且脏。

我目前正在使用ng-class完成这项工作。然而，我最终得到了一个庞大的表达，在html中看起来非常混乱和草率。以下是一个例子：

data-ng-class="{'component-is-valid' : 
form.firstName.$valid && form.firstName.$dirty && form.lastName.$valid  && form.lastName.$dirty && form.emailAddress.$valid &&     form.emailAddress.$dirty && form.mobileNumber.$valid &&   form.mobileNumber.$dirty}"

如你所见，这很长。

无论如何我可以提取这个以便保留ng-class的灵活性但是也可以释放我的DOM？

Answer 1

在您的作用域上创建一个接受表单对象或输入字段的函数，并返回您在上面描述的布尔值：ng-class="{'component-is-valid': checkValidity(form)}"

Answer 2

您可以使用$ctrl.form.$valid在一次点击中检查整个表单验证，而不是检查所有，因为Keegan G正确指出。

也就是说，有些情况下你的ngClass逻辑会变得非常庞大且难以理解。

我经常采用的另一种方法是将所有逻辑移动到控制器。 e.g。

模板：

<div ng-class="$ctrl.componentClasses()"></div>

控制器：

controller: function() {
  var vm = this;

  vm.isValid = function() {
    // do all your checking here, ultimately it should return a bool

    return [Boolean];
  }

  vm.componentClasses = function() {
    return {
      'my-class-name': vm.isValid()
    }
  }
}

我该如何整理ng-class？

2 个答案: