即使在 Angular JS 中必填字段为空,表单也会被提交

Posted

技术标签:

【中文标题】即使在 Angular JS 中必填字段为空,表单也会被提交【英文标题】:Form gets submitted even if the required fields are left empty in angular JS 【发布时间】:2015-04-30 04:52:39 【问题描述】:

我是 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');
      );       
      
      

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

【问题讨论】:

【参考方案1】:

显然它会提交你没有处理表单提交的表单。你只是管理了错误:-)

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

  <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');
          ); 
              
          

【讨论】:

【参考方案2】:

您在保存表单之前没有检查表单的有效状态,不要指望 Angular 会在表单无效时神奇地停止保存。

【讨论】:

【参考方案3】:

您应该查看ng-submit 的文档。如果您将 res_save 函数移动到表单上的 ng-submit 中(并删除了提交输入上的 ng-click),它将针对必填字段进行验证,在它们有效之前阻止执行该函数。

【讨论】:

以上是关于即使在 Angular JS 中必填字段为空,表单也会被提交的主要内容,如果未能解决你的问题,请参考以下文章

Angular 5 - 表单验证电子邮件

如何在提交表单之前验证电子邮件字段不为空

实体框架迁移中必填字段的默认值?

SharePoint 自定义列表表单不验证必填字段

Angular Material 输入验证错误消息

使 mat-radio-button 成为表单中的必填字段