fix(required): correctly validate required on non-input element surrounded by ngIf

Closes #16830
Closes #16836
This commit is contained in:
Martin Staffa
2019-03-06 18:08:05 +01:00
committed by Martin Staffa
parent edb3e22c01
commit a4c7bdccd7
2 changed files with 26 additions and 2 deletions
+8 -2
View File
@@ -68,15 +68,21 @@ var requiredDirective = ['$parse', function($parse) {
require: '?ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
var value = attr.required || $parse(attr.ngRequired)(scope);
// For boolean attributes like required, presence means true
var value = attr.hasOwnProperty('required') || $parse(attr.ngRequired)(scope);
attr.required = true; // force truthy in case we are on non input element
if (!attr.ngRequired) {
// force truthy in case we are on non input element
// (input elements do this automatically for boolean attributes like required)
attr.required = true;
}
ctrl.$validators.required = function(modelValue, viewValue) {
return !value || !ctrl.$isEmpty(viewValue);
};
attr.$observe('required', function(newVal) {
if (value !== newVal) {
value = newVal;
ctrl.$validate();
+18
View File
@@ -696,6 +696,13 @@ describe('validators', function() {
}));
it('should override "required" when ng-required="false" is set', function() {
var inputElm = helper.compileInput('<input type="text" ng-model="notDefined" required ng-required="false" />');
expect(inputElm).toBeValid();
});
it('should validate only once after compilation when inside ngRepeat', function() {
helper.compileInput(
'<div ng-repeat="input in [0]">' +
@@ -731,6 +738,7 @@ describe('validators', function() {
expect(helper.validationCounter.required).toBe(1);
});
it('should validate once when inside ngRepeat, and set the "required" error when ngRequired is false by default', function() {
$rootScope.isRequired = false;
$rootScope.refs = {};
@@ -744,5 +752,15 @@ describe('validators', function() {
expect($rootScope.refs.input.$error.required).toBeUndefined();
});
it('should validate only once when inside ngIf with required on non-input elements', inject(function($compile) {
$rootScope.value = '12';
$rootScope.refs = {};
helper.compileInput('<div ng-if="true"><span ng-model="value" ng-ref="refs.ctrl" ng-ref-read="ngModel" required validation-spy="required"></span></div>');
$rootScope.$digest();
expect(helper.validationCounter.required).toBe(1);
expect($rootScope.refs.ctrl.$error.required).not.toBe(true);
}));
});
});