JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.2.3/angular.js"></script>
<div ng-app="Helpers">
<div ng-controller="Ctrl">
<form name="form">
<select name="typeCargo" ng-model="typeCargo" required >
<option value="81dd8a13-8235-494f-84fd-9c04c51d50ec">Документы</option>
<option value="другой id">Груз</option>
<option value="еще один id">и т.д.</option>
</select><br />
<input type="text" name="weight" ng-model="weight" document-max-5kg="typeCargo" required/>
</form>
<div><br />
<span>typeCargo = {{ typeCargo }}</span><br />
<span>weight = {{ weight }}</span><br /><br />
<span ng-style="{ color: form.typeCargo.$valid ? 'green' : 'red' }">form.typeCargo.$valid = {{ form.typeCargo.$valid }}</span><br />
<span ng-style="{ color: form.weight.$valid ? 'green' : 'red' }">form.weight.$valid = {{ form.weight.$valid }}</span><br />
<span ng-style="{ color: !form.weight.$error.documentMax5kg ? 'green' : 'red' }">form.weight.$error.documentMax5kg = {{ form.weight.$error.documentMax5kg }}</span><br /><br />
<span ng-style="{ color: form.$valid ? 'green' : 'red' }" >form.$valid = {{ form.$valid }}</span><br /><br />
</div>
</div>
</div>
JavaScript
angular
.module( 'Helpers', [] )
.controller( 'Ctrl', [ '$scope', function($scope){
$scope.typeCargo = '81dd8a13-8235-494f-84fd-9c04c51d50ec';
$scope.weight = null;
}] )
.directive( 'documentMax5kg', [ '$parse', function( $parse ){
var TYPE_CARGO_DOCUMENT_KEY = '81dd8a13-8235-494f-84fd-9c04c51d50ec';
return {
require: '?ngModel',
link: function( scope, elem, attrs, ctrl ) {
ctrl && ctrl.$parsers.unshift( function( viewValue ) {
var typeCargo = $parse( attrs.documentMax5kg )( scope );
var value = parseFloat( viewValue );
if ( typeCargo && typeCargo == TYPE_CARGO_DOCUMENT_KEY )
return ( value && value <= 5 ) ? valid() : invalid();
else
return valid();
function valid(){
ctrl.$setValidity( 'documentMax5kg', true );
return viewValue;
}
function invalid(){
ctrl.$setValidity( 'documentMax5kg', false );
return undefined;
}
} );
}
};
} ] );