AngularJS 中的复杂表单验证答案

【问题标题】：Complex form validataion in AngularJSAngularJS 中的复杂表单验证
【发布时间】：2014-04-04 17:06:30
【问题描述】：

我正在尝试使用 AngularJS 进行表单验证。 scotch.io 中提到的验证方法非常有用。在我的表单中，我有一个下拉菜单，根据选定的选项，我需要进行表单验证并启用submit 按钮。

这里是Jsfiddle。在小提琴中，我只显示了 2 个下拉菜单，但我有 5 个下拉菜单，每个下拉菜单都会打开一个包含 6 个或更多字段的表单。我曾想过与ng-required 合作，但是表达式大小太长了。所以，我不能使用ng-required。

如何在提交表单之前进行验证？

【问题讨论】：

【解决方案1】：

您可以使用paramForm.$valid，然后在表单输入中添加ng-required="true" 或其他验证。然后将您的提交更改为：

<form novalidate name="paramForm" ng-submit="paramForm.$valid && paramSubmitForm()">

paramForm.$valid 也是范围可访问的，因此您可以重写您的 paramSubmitForm() 要做的功能：

$scope.paramSubmitForm(){
   if (!$scope.paramForm.$valid){
       return;
   }
   //submitting code
}

【讨论】：

【解决方案2】：

对于复杂的验证，我通常在submit 按钮上使用ng-disabled；我创建了一个验证函数，如果表单无效则返回 true 并将其绑定到 ng-disabled 属性。

类似：

$scope.validateForm = function() {
  /* return 'true' if  we want the button disabled */
};

和：

<form>
  <!-- all elements -->
  <button type="submit" ng-disabled="validateForm()">SUBMIT</button>
</form>

【讨论】：