Как проверить входное числовое значение по сравнению с ранее сохраненным значением и показать сообщение об ошибке, если оно не совпадает со значением

Question

Примечание: total - это числовое значение, которое динамически обновляется в соответствии с пользовательским вводом

 <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>

Answer 1

Я создаю пользовательскую директиву для проверки введенного значения и, если оно не совпадает с общим количеством членов домохозяйства, затем показывает сообщение об ошибке, чтобы обратить внимание пользователя на то, что он ввел неправильное значение.

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
    };

}

);

это должно установить достоверность ввода в false, если входное значение не равно значению {{total}}

 <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>

Answer 2

При разработке вы можете столкнуться с тем, что вам нужно создать собственный тест, который повлияет на валидность формы. Если эти тесты просты, такие как сравнение двух значений, лучше использовать общее руководство, чем написать собственный тест для каждой директивы. Посмотрите на директиву use-from-error.

Живой пример на 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>