angularjs - 以前に保存された値に対して入力数値をチェックし、同じ値でない場合はエラーメッセージを表示する方法

Question

注: 合計は、ユーザー入力に従って動的に更新される数値です

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

}

);

入力が {{total}} 値と等しくない場合、これは入力の有効性を false に設定する必要があります

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