0

注意：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>
4

2 回答 2

0

我创建自定义指令来检查输入的值，如果它与家庭成员的总数不同，则显示错误消息以提醒用户注意他输入了错误的值。

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>
于 2016-02-02T04:11:02.000 回答
0

在开发的时候，可能会面临需要自己创建测试的情况，这会影响表单的有效性。如果这些测试很简单，例如比较两个值，最好使用通用指南，而不是为每个指令编写自己的测试。查看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>
于 2016-02-03T11:13:54.997 回答