我有以下表单，但某些字段在页面加载时在框下方显示成功消息，甚至无需触摸表单。 有什么问题吗？
这是 Controller :
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">
这里有一个已知错误 https://github.com/angular-ui/ui-select/issues/258
关于javascript - angularjs 表单验证显示空表单页面加载成功，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40600101/