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 joint-validation="document-max-5kg">
<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 joint-validation="document-max-5kg"/>
</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 = 1;
$scope.test = function(){
console.log('log');
};
}] )
.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;
}
} );
}
};
} ] )
.directive( 'jointValidation', [ '$parse', function( $parse ){
return {
require: [ '?ngModel', '?select' ],
link: function( scope, elem, attrs, ctrls ) {
var modelCtrl = ctrls[0];
var selectCtrl = ctrls[1];
var value;
var elemVal;
var id = attrs.jointValidation ? '-' + attrs.jointValidation : '';
if ( modelCtrl ){
scope.$on( 'joint-validation' + id, function( event, eventElem ){
if ( elem[0] !== eventElem[0] ){
value = $parse( attrs.ngModel )( scope );
if ( !selectCtrl ){
elemVal = elem.val();
if ( value === null || elemVal ){
modelCtrl.$setViewValue( elemVal );
}
} else {
modelCtrl.$setViewValue( value );
}
}
} );
scope.$watch( attrs.ngModel, function(){
scope.$emit( 'joint-validation' + id, elem );
} );
}
}
};
} ] )
;