即使所需的字段在角JS中留空，表单也会被提交 [英] Form gets submitted even if the required fields are left empty in angular JS

问题描述

我是新来的角JS，我创建了一个表单，它是

HTML

 < div data-ng-controller =ReservationController
< form class =form-horizo​​ntalrole =form> 
< div class =form-group> 
< div class =col-sm-10> 
< label>来宾名称< / label> 
< input type =textclass =form-controlplaceholder =ng-model =res_guest_namerequired> 
< / div> 
< / div> 
 
< div class =form-group> 
< div class =col-sm-10> 
< label>电话< / label> 
< input type =phoneclass =form-controlng-model =res_member_phone> 
< / div> 
< / div> 
< div class =form-group> 
< div class =col-sm-10> 
< label>传真< / label> 
< input type =phoneclass =form-controlng-model =res_member_fax> 
< / div> 
< / div> 
< div class =form-group> 
< div class =col-sm-10> 
< label>电子邮件< / label> 
< input type =emailclass =form-controlng-model =res_member_emailrequired> 
< / div> 
< / div> 
< div class =form-group> 
< div class =col-sm-offset-8 col-sm-10> 
< button type =submitclass =btn btn-successng-click =res_save（）>保存更改< /按钮> 
< / div> 
< / div> 
< / form> 
< / div> 
  

控制器

 函数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+ &安培;电话= + $ scope.res_member_phone + &放大器;传真= + $ scope.res_member_fax + &放大器;电子邮件=+ $ scope.res_member_email; 
 $ http.get（save_res）.success（function（response）{
 alert（'success'）; 
}）; 
 
 
 
 
 $ b $ p 
 $ b 
空。它显示错误，然后它被提交。 
解决方案
很显然，它会提交表单，您没有处理提交的表单。您只是管理错误： - ） / p> 
 
 
使用 ng-disabled =myForm。$ invalid 
其中 myForm 是
 < form class =form-horizo​​ntal名称上的名称字段=myFormrole =form>  
 < button type =submit class =btn btn-successng-disable =myForm。$ invalidng-click =res_save（）>保存更改< /按钮> 
  
如果您不希望按钮被禁用，那么您可以使用
 < button type =submitclass =btn btn-successng-click =res_save（myForm。$ valid）>保存更改< /按钮> 
  
并在控制器中
  $ scope.res_save = function（valid）
 {
 if（valid）{
 var save_res =https://pbg.com/save_form.html?contactid = + conId + &放大器;令牌= +令牌+ 和ID = + $ scope.resId + &放大器;页=编辑和放大器; guest_name = + $ scope.res_guest_name + &放大器;手机= + $ scope.res_member_phone + &安培;传真= + $ scope.res_member_fax + &放大器;电子邮件=+ $ scope.res_member_email; 
 $ http.get（save_res）.success（function（response）{
 alert（'success'）; 
}）; 
} 
} 
  
 
I am newbie to angular JS and i have created a form which is

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>
CONTROLLER
  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');
      });       
      }
      }
My form gets submitted even after the required fields are left empty. it shows the error, then it gets submitted. 
解决方案
Obviously it will submit the form you didn't handled the submission of form.You just managed the errors :-)

Use  ng-disabled="myForm.$invalid"
where myForm is the name field on form

<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>
If you don't want the button to be disable till then you can use 
<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>
And in controller 
   $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');
          }); 
        }      
          }


                        
这篇关于即使所需的字段在角JS中留空，表单也会被提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！