Angularjs表单验证会在加载空表单的页面时显示成功
angularjs form validation shows success on page load with empty form
我有以下的表单,但有些字段显示成功消息框下面的页面加载,甚至没有触及表单。有什么问题吗?
这是控制器:
app.controller('ValidationCtrl', ["$scope", "$state", "$timeout", "SweetAlert","$location", "firebase", "$translate","$http", "$rootScope", "flowFactory",
function ($scope, $state, $timeout, SweetAlert, $location, firebase, $translate, $http, $rootScope, flowFactory) {
$scope.master = $scope.myModel;
$scope.form = {
submit: function (form) {
var firstError = null;
if (form.$invalid) {
var field = null, firstError = null;
for (field in form) {
if (field[0] != '$') {
if (firstError === null && !form[field].$valid) {
firstError = form[field].$name;
}
if (form[field].$pristine) {
form[field].$dirty = true;
}
}
}
angular.element('.ng-invalid[name=' + firstError + ']').focus();
SweetAlert.swal("The form cannot be submitted because it contains validation errors!", "Errors are marked with a red, dashed border!", "error");
return;
} else {
SweetAlert.swal("Good job!", "Your form is ready to be submitted!", "success");
//your code for submit
}
},
reset: function (form) {
$scope.myModel = angular.copy($scope.master);
form.$setPristine(true);
}
};
}]);
,下面是显示页面加载成功文本的空表单字段:
<div class="form-group" ng-class="{'has-error':Form.keyword.$dirty && Form.keyword.$invalid, 'has-success':Form.keyword.$valid}" >
<label class="control-label" translate="list.keyword">
Keyword<span class="symbol required"></span>
</label>
<ui-select multiple tagging tagging-label="true" ng-model="myModel.keyword" theme="bootstrap" name="keyword" title="Choose a keyword">
<ui-select-match placeholder="Enter the keywords...">{{$item}}</ui-select-match>
<ui-select-choices repeat="r in list.keylist | filter:$select.search">
{{r}}
</ui-select-choices>
</ui-select>
<span class="error text-small block" ng-if="Form.keyword.$dirty && Form.keyword.$error.required">Keyword is required.</span>
<span class="error text-small block" ng-if="Form.keyword.$dirty && Form.keyword.$error.minlength">Too short!</span>
<span class="success text-small" ng-if="Form.keyword.$valid">Correct!</span>
</div>
尝试在ui-select中使用required和minlength属性。如下所示
<ui-select multiple tagging tagging-label="true" ng-model="myModel.keyword" theme="bootstrap" name="keyword" title="Choose a keyword" required minlength="6">
这里有一个已知的bug https://github.com/angular-ui/ui-select/issues/258
相关文章:
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- jQuery动态表单显示在select选项上
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将表单张贴到MailChimp,但显示动态成功页面
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- HTML多页表单显示隐藏部分,保留表单数据
- 使用JavaScript将数据从一个表单显示到另一个页面
- Php 搜索表单显示结果时无需按搜索按钮,而它应该等到按下按钮才能显示它们
- HTML:如何使一个表单显示在另一个表单之上
- 值通过表单提交,然后即使在提交并显示值之后,也会以表单显示已提交的值
- 提交时的 Jquery 表单显示成功消息
- 是否有可接受的跨平台方法在基于触摸的设备上以标准 Web 表单显示数字键盘
- 如何将表单显示从=更改为:
- 表单显示问题+数组下的结果
- 自动完成使用Alpaca表单显示密钥和值
- Google appscript表单显示供用户选择的数组值
- 引导提交表单显示从javascript计时器
- 表单显示PHP HTML
- 基于PHP ajax的表单显示空白页面
- ASP.NET表单显示另一个字段中基于节的表单字段