[英]custom directive is not validating form. why not?
為了獲得下面的自定義countparens
指令,需要進行哪些代碼更改,以在表單驗證期間提供下面顯示的額外的自定義字符串驗證? 當輸入字段為空時,下面的代碼可以成功地警告用戶,但是當打開的括號(
和關閉的括號)
數量不相等時,它不會警告用戶。
我正在使用AngularJS。 我使用此鏈接處的文檔(滾動至底部)來設計以下代碼。
這是表單的html:
<table>
<tr>
<td width=200>
<form name="userForm" ng-submit="rectangularForm(userForm.$valid)" novalidate>
<input type="text" name="fieldname" ng-model="nameofjsontype.fieldname" required />
<p ng-show="userForm.fieldname.$invalid && !userForm.fieldname.$pristine" class="help-block">Function is a required field.</p>
<span ng-show="userForm.nameofjsontype.fieldname.$error.countparens">The #( != #) !</span>
<br>
<button type="submit" ng-disabled="userForm.$invalid" >Click to submit</button>
</form>
</td>
</tr>
</table>
包含指令的javascript文件包括:
// create angular app
var myApp = angular.module('myApp', []);
// create angular controller
myApp.controller('myController', ['$scope', '$http', function($scope, $http) {
$scope.nameofjsontype = {type:"nameofjsontype", fieldname: 'some (value) here.'};
$scope.rectangularForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
var funcJSON = {type:"nameofjsontype", fieldname: $scope.nameofjsontype.fieldname};
$http.post('/server/side/controller', funcJSON).then(function(response) {
$scope.nameofjsontype = response.data;
});
}
};
}]);
myApp.directive('countparens', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.countparens = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (
($scope.nameofjsontype.fieldname.match(/\)/g).length) == ($scope.nameofjsontype.fieldname.match(/\(/g).length)
) {
// it is valid
return true;
}
// it is invalid
return false;
};
}
};
});
您的標記應該使用userForm.fieldname.$error.countparens
來顯示錯誤。 綁定到userForm
的字段與您的ngModel
值不同。 見笨蛋我的意思
<span ng-show="userForm.fieldname.$error.countparens" class="help-block">The #( != #) !</span>
您還沒有在輸入元素上使用指令:
<input type="text" name="fieldname" ng-model="nameofjsontype.fieldname" required data-countparens=""/>
在您的指令中
modelValue
而不是范圍值 (
或)
沒有匹配項的情況 。
myApp.directive('countparens', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.countparens = function(modelValue, viewValue) {
return ctrl.$isEmpty(modelValue) ||
((modelValue.match(/\)/g) || []).length == (modelValue.match(/\(/g) || []).length);
};
}
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.