表单会被提交，即使所需的字段在angular JS中为空

Form gets submitted even if the required fields are left empty in angular JS

本文关键字：angular 字段 JS 提交 表单      更新时间：2024-06-29

我是angular JS的新手，我创建了一个表单，它是

HTML

<div data-ng-controller="ReservationController"
    <form class="form-horizontal" role="form">
            <div class="form-group">
              <div class="col-sm-10">
                <label>Guest Name</label>
                <input type="text" class="form-control" placeholder="" ng-model="res_guest_name" required>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10">
                <label>Phone</label>
                <input type="phone" class="form-control"  ng-model="res_member_phone">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10">
                <label>FAX</label>
                <input type="phone" class="form-control"  ng-model="res_member_fax">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10">
                <label>Email</label>
                <input type="email" class="form-control"  ng-model="res_member_email" required>
              </div>
            </div>
          <div class="form-group">
              <div class="col-sm-offset-8 col-sm-10">
                <button type="submit" class="btn btn-success" ng-click="res_save()">Save Changes</button>
              </div>
            </div> 
          </form>
          </div>

控制器

  function ReservationController($scope, $http,       $cookieStore,$location,$filter) {
     $scope.res_save = function()
      {
       var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
    alert('success');
      });       
      }
      }

即使必填字段为空，我的表单也会被提交。它显示错误，然后提交。

很明显，它会提交你没有处理表单提交的表单。你只是管理了错误：-）

使用ng-disabled="myForm.$invalid"其中myForm是表单上的name字段
<form class="form-horizontal" name="myForm" role="form">

  <button type="submit" class="btn btn-success" ng-disable="myForm.$invalid" ng-click="res_save()">Save Changes</button>

如果你不想在那之前禁用按钮，你可以使用

<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>

和在控制器

   $scope.res_save = function(valid)
         {
           if(valid){
           var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
    $http.get(save_res).success(function(response) {
        alert('success');
          }); 
        }      
          }

在保存表单之前，您没有检查表单的有效状态，不要期望angular在表单无效时神奇地停止保存。

您应该查看ng提交的文档。如果将res_save函数移动到表单上的ng提交中（并删除提交输入上的ng单击），它将根据所需字段进行验证，并在这些字段有效之前阻止执行该函数。

相关文章：