how to check input numeric value against value previous saved and show error message if it is not the same value

Question

note: total is number value that update dynamically according to user input

 <md-input-container class="md-block">
                    <input required type="number" ng-pattern="/^total$/" step="any" name="num" ng-model="house.No" style="max-width:100px;">
                    <div ng-messages="Form.num.$error" multiple>
                        <div ng-message="required">Please provide Total Household Members.</div>
                        <div ng-message="pattern">According to your input in step 1 and step 3(part B), your total Household Members is {{total}} </div>
                    </div>
                </md-input-container>

What is your question? What are you trying to achieve? How could an input for numbers match the pattern `/^total$/`, which can only be matched by entering the string "total"? — JB Nizet, Jan 28 '16 at 22:33
Total($scope.total) is variable inside controller that sum household members , so It is actually a number and I am not sure if ng-pattern is the right choice. — Kero, Jan 28 '16 at 22:40
It's not. ng-pattern checks that an entered string matches with a regexp. It's hard to say what the right choice is, because you haven't said what you wanted to achieve. — JB Nizet, Jan 28 '16 at 22:47
I want to check if input number is the same as total household members and if not error message should show up to guide user that number has been entered is not the right number (not the right household members ) — Kero, Jan 28 '16 at 23:06
You need a custom directive that watches the total, and adds a validator that checks that the entered value is equal to the total. Read https://docs.angularjs.org/guide/forms#custom-validation — JB Nizet, Jan 28 '16 at 23:12
Just curious, why not just display the number of household members since you already know it instead of making them enter it again? — Bryan K, Jan 29 '16 at 16:23
@Widget it is client requirement, I think they want to make sure that he add all household members and if not , i am showing error message to tell user that he enter wrong number and he/she has to check if she entered all household members in previous steps — Kero, Jan 29 '16 at 16:28

score 0 · Answer 1 · answered Feb 02 '16 at 04:11

I Create custom directive to check the value input and if it is not the same as total of household members then show error message to pay user attention that he input the wrong value.

app.directive('exact',
function () {

    var link = function ($scope, $element, $attrs, ctrl) {

        var validate = function (viewValue) {
            var comparisonModel = $attrs.exact;

            if (!viewValue || !comparisonModel) {
                // It's valid because we have nothing to compare against
                ctrl.$setValidity('exact', true);
            }

            if (parseInt(viewValue) != parseInt(comparisonModel)) {
                ctrl.$setValidity('exact', false);
                return viewValue;
            } else {
                ctrl.$setValidity('exact', true);
                return viewValue;
            }
        };

        ctrl.$parsers.unshift(validate);
        ctrl.$formatters.push(validate);

        $attrs.$observe('exact', function (comparisonModel) {
            return validate(ctrl.$viewValue);
        });

    };

    return {
        require: 'ngModel',
        link: link
    };

}

);

this should set validity of input to false if the input is not equal to the {{total}} value

 <md-input-container class="md-block">
                <input required type="number" exact="{{total}}"name="num" ng-model="house.No" style="max-width:100px;">
                <div ng-messages="Form.num.$error" multiple>
                    <div ng-message="required">Please provide Total Household Members.</div>
                    <div ng-message="exact">According to your input in step 1 and step 3(part B), your total Household Members is {{total}} </div>
                </div>
            </md-input-container>

score 0 · Answer 2 · answered Feb 03 '16 at 11:13

When developing, you can face the fact that you need to create your own test, which will affect the validity of the form. If these tests are simple, such as a comparison of the two values, it is better to use a general guideline, than to write your own test for each directive. Look at use-from-error directive.

Live example on jsfiddle

<form name="ExampleForm">
  <label>Total</label>
  <input ng-model="total" required />
  <br>
  <label>Total Household Members (house.No)</label>
  <input ng-model="No" name="No" use-form-error="isNotExact" use-error-expression="total && No && total!=No" required />
  <div>
    For debuging {{ExampleForm.No.$error|json}}
  </div>
  <div ng-messages="ExampleForm.No.$error" class="errors">
    <div ng-message="required">Please provide Total Household Members.</div>
    <div ng-message="isNotExact">
      According to your input in step 1 and step 3(part B), your total Household Members is {{total}}
    </div>
  </div>
</form>

how to check input numeric value against value previous saved and show error message if it is not the same value

2 Answers2