Validation UX

For servoy components you can use the angular classes (https://docs.angularjs.org/api/ng/directive/form) to set appearance of the component when it is not valid, by default servoy adds this class to our default css:

.ng-invalid {
	background-color: #f90000;
}

You can overwrite this value by given providing your own .ng-invalid class.

This ng-invalid class is set on the component when a validation error occurs on the server or the onDataChange returns false.

For ng-client the default components also accepts a string as the return value of a n onDataChange, this string value is then shown as the tooltip of the component.

For webcomponent developers (that want to implement the same behavior in there own webcomponents)

The servoy default components are using the default angular by using the ngModel directive (https://docs.angularjs.org/api/ng/directive/ngModel) and its controller (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) to set the field to invalid (or valid)

First the component has this in the spec:

 "dataProviderID" : { "type":"dataprovider", "scope" :"design", "ondatachange": { "onchange":"onDataChangeMethodID", "callback":"onDataChangeCallback"}}, 

this means that for the dataprovider that is attached to that property, that can have a ondatachange event, that ondatachange event return value will be send to the callback method called 'onDataChangeCallback'.

the code of the onDataChangeCallback is then as follows:

link:function($scope, $element, $attrs, ngModel) {
			var storedTooltip = false;
			// fill in the api defined in the spec file
			$scope.api.onDataChangeCallback = function(event, returnval) {
				var stringValue = typeof returnval == 'string'
				if(!returnval || stringValue) {
					$element[0].focus();
					ngModel.$setValidity("", false);
					if (stringValue) {
						if ( storedTooltip == false)
							storedTooltip = $scope.model.toolTipText;
						$scope.model.toolTipText = returnval;
					}
				}
				else {
					ngModel.$setValidity("", true);
					$scope.model.toolTipText = storedTooltip;
					storedTooltip = false;
				}
			}

So in the link function we ask also for the ngModel of this component, then in the callback we are looking if the returnval is a boolean or a string if that is true or it is a string value, we call the ngModel method $setValidity() to let the system know that this component is in an invalid state.

The string value is then set as the tooltip (and we remember the tooltip that it really had)

The ngModel controller then sets the class ng-invalid on this component.