即使在 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 的新手,我创建了一个表单
<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
字段<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');
);
【讨论】:
【参考方案2】:您在保存表单之前没有检查表单的有效状态,不要指望 Angular 会在表单无效时神奇地停止保存。
【讨论】:
【参考方案3】:您应该查看ng-submit 的文档。如果您将 res_save 函数移动到表单上的 ng-submit 中(并删除了提交输入上的 ng-click),它将针对必填字段进行验证,在它们有效之前阻止执行该函数。
【讨论】:
以上是关于即使在 Angular JS 中必填字段为空,表单也会被提交的主要内容,如果未能解决你的问题,请参考以下文章