Revalidate Input

Since version 1.4.21

What if you want to validate one element by changing the value of another element?

If your validation function depends on multiple values / multiple fields you can configure validation for one element and revalidate it in the change event of another element.

Demo

In the demo you get a validation message by selecting too many entries for the same day. The validation function depends on the given day and the selected absence type.

• Having the same day two times with the absence type 1 Day Holiday is invalid.
• Having the same day two times with one absence type Visit to the doctor and on absence type 1/2 Day Sick Day is valid.

Validation is executed when changing text or absence type.

You can find a Plunker Demo here

Requirements

• Validation is created via Directive

Code Sample

This only work with Directives for now.

HTML

HTML Code

<input type="text" name="absence_day" ng-model="absence.day"
         validation="{{absence.absenceType ? 'required' : ''}}|custom:checkCompleteInputIsValid(absence)" />
<select name="absence_type" ng-model="absence.absenceType"
        ng-change="absenceTypeChanged()"
        validation="{{ absence.day && absence.day != '' && absence.day != null ? 'required' : ''}}">
        <option></option>
        <option ng-repeat="absenceType in absenceTypes" value="{{absenceType.id}}">{{absenceType.description}}</option>
</select>

JavaScript Code

$scope.absenceTypeChanged = function() {
  // do it with a timeout because you can't say that the model is updated by now
  $timeout(function() { revalidate('absence_day'); }, 1);
};

function revalidate(elementName) {
  $scope.$broadcast('angularValidation.revalidate', elementName);
}

Revalidate

Trigger event

You can trigger the validation of an element by calling $scope.$broadcast('angularValidation.revalidate', ELEMENTNAME); and giving the name of the element to revalidate as the second parameter.