Conditional ngPattern

Question

Following this bit of code:

    <label class="checkbox-label">
        <input name="radio1" type="radio"
               ng-model="myModel.radio" 
               required ng-required="true" 
               value="1">
    </label>
    <label class="checkbox-label">
        <input name="radio1" type="radio"
               ng-model="myModel.radio" 
               required ng-required="true"
               value="2">
    </label>

    <input type="number" name="result" class="form-control input-sm" ng-model="myModel.result"
        required ng-required="true" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.1" min="0" max="100">

i need to set the ng-pattern & step to accept one decimal place (0.1) or two decimal places (0.01) based on the radio1 selection

Anyone has an idea how to approach this?

UPDATE I have created a directive to do this, but validation is not triggered after changing the pattern (Angular 1.2)

app.directive('stepChange', function () {
    return {
        link: function link(scope, element, attr) {
            element.bind('change', function () {
                var el = angular.element(attr['target']);
                el.attr('step', attr['step']);
                el.attr('pattern', attr['pattern']);
                el.val(attr['val']);
                el.trigger();
            });
        }
    }
});

Answer 1

You should write custom implementation for step and pattern to work dynamically.

For Reference

How to customize the step of a number input field?

HTML5 input type=number change step behavior

Answer 2

The key to doing this is :

1. Apply watch on model used in radio.

2. Change step value in above watch and assign it back using scope variable

   $scope.$watch('myModel.radio',function(a,b){
        debugger
        if(a ==1){
           $scope.step = "0.1";
        }else if(a==2){
           $scope.step = "0.01";
        }
      });
   

Please apply the step logic/values yourself in plunkr.

https://plnkr.co/edit/BKTS5jDTRoRQomNzHSt2?p=preview

You can also make the ng-pattern dynamic the same way(like step)

<input type="number" name="result" class="form-control input-sm" 
    ng-model="myModel.result" required ng-required="true" 
    ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step={{step}} min="0" max="100">