Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Revalidate Input

Timo Peter edited this page Jan 21, 2016 · 14 revisions

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 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 the Directive for now. #####HTML HTML Code

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

JavaScript Code

$scope.absenceTypeChanged = function(srcElementName, myValidationGroup) {
  $timeout(function() { revalidate(srcElementName, myValidationGroup); }, 1);
};

function revalidate(srcElementName, myValidationGroup) {
  var elementsToValidate = $("[myValidationGroup='" + myValidationGroup + "']");
  elementsToValidate.each(function (index) {
    var element = $(this)[0];
    if (element.name != srcElementName)
      $scope.$broadcast('angularValidation.revalidate', element.name);
  });
}

####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.

Clone this wiki locally