How to customize a angular number input validation

Question

I am using a directive that validates number input boxes. I would like to change it to fit my needs. right now it allows me to enter numbers or text and throws the error message on button click. It also triggers the function. I would like it to instantly throw the error message when text is entered and I also would like to have the button disabled until both inputs are valid.

Sum it up, I need the error message triggered immediately on any text entered. and the button needs to be disabled until both fields are valid

<form class="form-horizontal">
        <div class="form-group">
            <div class="col-md-12">
                <label for="inputEmail3" class="control-label">Price</label>
                <input class="form-control input-sm" to-number id="Price" type="number" ng-model="customSubjectProperty.price" ng-pattern=" /^\d+$/" placeholder="Price">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label">Sqft</label>
                <input class="form-control input-sm" to-number id="Sqft" type="number" ng-model="customSubjectProperty.sqft" ng-keypress="chartController.newInputKeyPress()" ng-pattern="/^\d+$/" placeholder="Sqft">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12" style="margin-top:12px">
                <button class="btn btn-primary btn-block btn-sm" ng-click="chartController.addSubjectPoint(customSubjectProperty)" ng-enter="chartController.addSubjectPoint(customSubjectProperty)">Add Point</button>
            </div>
        </div>
    </form>

app.directive('toNumber', function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
        ctrl.$parsers.push(function (value) {
            return parseFloat(value || '');
        });
    }
};

});

I would define an ng-pattern with the allowed regex and show errors using angular built in validation. That will trigger the error on focus lost — Chris Noring
– Chris Noring, Commented Apr 23, 2015 at 18:10
if its a momentary feedback you need you should probably do something on key up $(elem).on('keyup',callback), inside the directive, just remember to do apply — Chris Noring
– Chris Noring, Commented Apr 23, 2015 at 18:13

user3349049 · Accepted Answer · 2015-05-14 02:11:33Z

1

app.directive('toNumber', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
    ctrl.$parsers.push(function (value) {
    $(elem).on('keyup',callback), 
        return parseFloat(value || '');
        $scope.apply()
    });
   }
};

answered May 14, 2015 at 2:11

user3349049

1722 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to customize a angular number input validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related