AngularJS中的复杂表单验证

Question

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

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

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

Answer 1

通过复杂的验证，我通常会在ng-disabled按钮上使用submit;如果表单无效，我创建一个返回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>

Answer 2

您可以使用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
}