仅在提交或用户input时validation表单域
我有表单字段，使用requiredvalidation。 问题是，表单呈现时立即显示错误。 我只想在用户实际input文本字段或提交后显示。
我怎样才能实现呢？
只有在用户与input交互之后，才能使用$dirty标志来显示错误：
<div> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span> </div>
如果只在用户提交表单之后触发错误，则可能会使用单独的标志variables，如下所示：
<form ng-submit="submit()" name="form" ng-controller="MyCtrl"> <div> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="(form.email.$dirty || submitted) && form.email.$error.required"> Email is required </span> </div> <div> <button type="submit">Submit</button> </div> </form>
function MyCtrl($scope){ $scope.submit = function(){ // Set the 'submitted' flag to true $scope.submitted = true; // Send the form to server // $http.post ... } };
那么，如果在ng-showexpression式中的所有JS看起来对你来说太多了，你可以把它抽象成一个单独的方法：
function MyCtrl($scope){ $scope.submit = function(){ // Set the 'submitted' flag to true $scope.submitted = true; // Send the form to server // $http.post ... } $scope.hasError = function(field, validation){ if(validation){ return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]); } return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid); }; };
<form ng-submit="submit()" name="form"> <div> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="hasError('email', 'required')">required</span> </div> <div> <button type="submit">Submit</button> </div> </form>
如果您想在表单提交中显示错误消息，则可以使用条件form.$submitted以检查是否尝试提交表单。 检查下面的例子。
<form name="myForm" novalidate ng-submit="myForm.$valid && createUser()"> <input type="text" name="name" ng-model="user.name" placeholder="Enter name of user" required> <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted"> <div ng-message="required">Please enter user name.</div> </div> <input type="text" name="address" ng-model="user.address" placeholder="Enter Address" required ng-maxlength="30"> <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted"> <div ng-message="required">Please enter user address.</div> <div ng-message="maxlength">Should be less than 30 chars</div> </div> <button type="submit"> Create user </button> </form>
你可以使用angularjs表单状态form.$submitted 。 最初form.$submitted值将是false并在成功提交表单后成为true 。
Erik Aigner，
请使用$ dirty（该字段已被修改）和$ invalid（字段内容无效）。
请检查下面的angular度formsvalidation的例子
1）
用户inputinput的validation示例HTML：
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>Email:<br> <input type="email" name="email" ng-model="email" required> <span ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span> </p> </form>
2）
用户提交的validation示例HTML / Js：
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation=""> <p>Email:<br> <input type="email" name="email" ng-model="email" required> <span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span> </p> <p> <input type="submit"> </p> </form>
自定义指令：
app.directive('formSubmitValidation', function () { return { require: 'form', compile: function (tElem, tAttr) { tElem.data('augmented', true); return function (scope, elem, attr, form) { elem.on('submit', function ($event) { scope.$broadcast('form:submit', form); if (!form.$valid) { $event.preventDefault(); } scope.$apply(function () { scope.submitted = true; }); }); } } }; })
3）
你不想像下面那样使用指令使用ng-change函数
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate ng-change="submitFun()"> <p>Email:<br> <input type="email" name="email" ng-model="email" required> <span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span> </p> <p> <input type="submit"> </p> </form>
控制器SubmitFun（）JS：
var app = angular.module('example', []); app.controller('exampleCntl', function($scope) { $scope.submitFun = function($event) { $scope.submitted = true; if (!$scope.myForm.$valid) { $event.preventDefault(); } }
}）;
对表单元素的validation调用可以通过在这个元素上触发更改事件来处理：
a）例如：在表单中触发分离元素的变化
$scope.formName.elementName.$$element.change();
b）示例：触发每个表单元素的更改事件，例如ng-submit，ng-click，ng-blur …
vm.triggerChangeForFormElements = function() { // trigger change event for each of form elements angular.forEach($scope.formName, function (element, name) { if (!name.startsWith('$')) { element.$$element.change(); } }); };
c）以及另外一种方法
var handdleChange = function(form){ var formFields = angular.element(form)[0].$$controls; angular.forEach(formFields, function(field){ field.$$element.change(); }); };
