53
A
回答
91
使用$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>
如果你想在用戶提交表單後,才比你可以使用一個單獨的標誌變量來觸發錯誤在:
<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 ...
}
};
然後,如果所有的JS裏面ng-show
表情看起來太適合你,你可以抽象成一個獨立的實現方法具d:
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>
0
埃裏克·艾格納,
請使用$髒(現場已被修改)和$無效(字段內容無效)。
請檢查下面的角表單驗證
1)
驗證例如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)
驗證例如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)
你不希望像下面
<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使用指令使用NG-切換功能:
var app = angular.module('example', []);
app.controller('exampleCntl', function($scope) {
$scope.submitFun = function($event) {
$scope.submitted = true;
if (!$scope.myForm.$valid)
{
$event.preventDefault();
}
}
});
3
如果您想在表單提交中顯示錯誤消息,則可以使用條件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>
1
您可以使用angularjs窗體狀態form.$submitted
。 最初form.$submitted
的值將爲false
,成功提交表單後將變爲true
。表單元素上驗證
0
調用可以通過該元素上的觸發改變事件進行處理:
一個)爲例:觸發改變分離元件上形式
$scope.formName.elementName.$$element.change();
B)爲例:觸發改變事件每個例如在NG-提交,NG-點擊,NG-模糊的表單元素...
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();
});
};
相關問題
- 1. jQuery驗證:僅在字段驗證時提交表單
- 2. 用戶輸入時驗證並提交驗證
- 3. 在表單驗證失敗時僅輸入一次驗證碼?
- 4. MVC3僅限提交表單的驗證
- 5. 如何在提交之前單擊輸入提交時驗證輸入?
- 6. 在提交時驗證多個輸入
- 7. 提交前驗證表單域
- 8. 驗證用戶輸入或
- 9. 驗證表單提交時的輸入框
- 10. 僅使用javascript驗證表單並阻止用戶提交JS禁用表單?
- 11. rails輸入驗證提交表格
- 12. 如何在用戶點擊提交時驗證MDL表單?
- 13. 使用submithandler(jquery驗證)在驗證時提交表單
- 14. 使用Javascript提交HTML5表單並驗證其輸入
- 15. 驗證表單不在空輸入框上提交
- 16. 驗證表單在提交前輸入ajax
- 17. 在提交表單之前驗證輸入字段
- 18. 表單驗證提交
- 19. 表單驗證不提交
- 20. 提交Redux表單驗證
- 21. 提交PHP驗證表單
- 22. 表單提交驗證
- 23. PHP表單驗證提交
- 24. 驗證表單提交
- 25. jQuery表單提交驗證
- 26. 表單提交時未驗證
- 27. 當JavaScript驗證時表單不提交
- 28. 當使用ajax和php提交表單提交時驗證captcha
- 29. 使用輸入類型提交時,html5表單驗證不起作用
- 30. AngularJS驗證僅提交
'$髒'做了伎倆。 –
剛開始與Angular和抽象的「hasError」方法真的很好,謝謝! – daddywoodland
hasError函數似乎無法使用角度1.2工作。它看起來不像控制器可以訪問表單。 –