JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="Printler">
<form id="productForm" name="productForm" data-ng-controller="ProductController">
<div class="form-group" ng-if="product.p_type != 'singlepage'">
<label class="col-sm-3 control-label">Количество страниц</label>
<div class="col-sm-3">
<div class="input-middle input-inline" ng-class="{'has-error' : productForm.pages_number.$invalid }">
<div class="input-group bootstrap-touchspin">
<input name="pages_number"
type="number"
id="pages_number"
min="{{product.pages_on_spread_block}}"
step="{{product.pages_on_spread_block}}"
class="form-control"
ng-model="params.block.pagesNumber"
divides-by="product.pages_on_spread_block"/>
<span class="input-group-btn">
<button class="btn bootstrap-touchspin-down" type="button" ng-if="params.block.pagesNumber > product.pages_on_spread_block" ng-click="params.block.pagesNumber = params.block.pagesNumber - product.pages_on_spread_block">-</button>
</span>
<span class="input-group-btn">
<button class="btn bootstrap-touchspin-up" ng-click="params.block.pagesNumber = params.block.pagesNumber + product.pages_on_spread_block" ng-init="params.block.pagesNumber=product.pages_on_spread_block" type="button">+</button>
</span>
</div>
<span class="help-block" ng-show="productForm.pages_number.$error.dividesBy">
Количество страниц в блоке должно делиться на {{ product.pages_on_spread_block }}
</span>
</div>
</div>
<div class="col-md-3">страниц</div>
</div>...
JavaScript
var Printler = angular.module('Printler', []);
Printler.controller(
'ProductController',
['$scope',
function ($scope) {
$scope.product = {
pages_on_spread_block: 2,
p_type: 'multipage'
};
$scope.params = {
block: {
pagesNumber: 10
}
};
}
]);
Printler.directive('dividesBy', function() {
return {
require: 'ngModel',
scope: {
'dividesBy': '='
},
link: function($scope, el, attrs, ctrl) {
ctrl.$parsers.push(function(val) {
if(val % $scope.dividesBy == 0) {
ctrl.$setValidity('dividesBy', true);
return val;
} else {
ctrl.$setValidity('dividesBy', false);
return val;
}
});
}
}
});