javascript - 如果 Div 上的条件为真，如何防止提交表单？

Question

如果条件为真，如何阻止表单提交，请参阅我的实现，我不想提交表单，直到字段有值。如何使用 AngularJS 实现任务？

表单.html

<div class="panel panel-default" ng-keypress="entityClosure($event)">
  <div class="panel-heading">
    <div class="panel-title">
      <div ng-show="editMode">Process Details</div>
        <div ng-hide="editMode">Create New Process</div>
      </div>
   </div>
 <div>
<div class="panel-body">
  <div class="row">
    <form name="createProcessFormName" id="createProcessForm" name="form" role="form" class="form-horizontal" kendo-validator="validator" k-validate-on-blur="false" k-options="myValidatorOptions" ng submit="validate($event)">
      <div class="panel-body formHeight">
        <div>
          <p class="status {{ validationClass }}">{{validationMessage}}</p>
        </div>
        <div class="row">
          <div class="form-group col-md-6 fieldHeight">
            <label for="countries" class="col-md-5 required">Geographic Locations:</label>
          <div class="col-md-7">
            <div multiselect-dropdown-tree ng model="nonPersistentProcess.geoLocations"  disable-children="true" options="treeviewOptions">
            </div>
            <p class="text-danger" ng-show="geoLocationRequired">GeoLocation is required</p>
         </div>
       </div>
    </div>                  
<div class="panel-footer">
  <span>
    <button ng-hide="editMode" class="btn btn-primary pull-right" type="button" ng-click="validate($event)">Save</button>
  </span>
</div>

验证.js

 $scope.validate = function (event) {
   event.preventDefault();
   if(!$scope.nonPersistentProcess.geoLocations.length){
     $scope.geoLocationRequired = true
    }
 }

Answer 1

在 angularjs 中使用 $valid 表单属性

 $scope.validate = function (event, valid) {
   event.preventDefault();
   if(valid){
     if(!$scope.nonPersistentProcess.geoLocations.length){
       $scope.geoLocationRequired = true
      }
   }
};

在您的模板上，您需要传入 form.$valid。例如；

<span>
  <button ng-hide="editMode" class="btn btn-primary pull-right" type="button" ng-click="validate($event, createProcessFormName.$valid)">Save</button>
</span>