0
我想使用AngularJS創建自定義表單驗證。該表單應該有輸入和選擇元素。當任何輸入爲空或者都填入一些值時,表單應該是有效的。下面是這個視圖:
<form name="recipientsForm" novalidate>
<md-input-container>
<label>Name</label>
<input name="name" type="text" ng-model="relationship.name" value="" empty-or-both-filled="relationship.relationshipType">
<div ng-messages="recipientsForm.name.$error">
<div ng-message="emptyOrBothFilled">Enter name.</div>
</div>
</md-input-container>
<md-input-container>
<md-select name="type" placeholder="Select your relation... " ng-model="relationship.relationshipType" empty-or-both-filled="relationship.name">
<md-option ng-repeat="type in relationshipTypes" value="{{type.relationshipType}}">
{{type.name}}
</md-option>
</md-select>
<div ng-messages="recipientsForm.type.$error">
<div ng-message="emptyOrBothFilled">Pick relationship.</div>
</div>
</md-input-container>
</form>
這裏是指令:
(function() {
'use strict';
angular
.module('app')
.directive('emptyOrBothFilled', [emptyOrBothFilled]);
function emptyOrBothFilled() {
return {
restrict: 'A',
required: 'ngModel',
scope: {
targetNgModel: '=emptyOrBothFilled'
},
link: function($scope, element, attrs, ngModel) {
ngModel.$validators.emptyOrBothFilled = function(val) {
var isValueEmpty = !val;
var isTargetEmpty = !$scope.targetNgModel;
return (isTargetEmpty && isValueEmpty) || (!isTargetEmpty && !isValueEmpty);
}
$scope.$watch('targetNgModel', function() {
ngModel.$validate();
})
}
}
}
})();
提示,請,爲什麼我得到這個錯誤:
TypeError: Cannot read property '$validators' of undefined
at link (http://localhost:3000/app/shared/directives/EmptyOrBothFilled.js:17:24)
男人,你很酷,謝謝! –