Question

我在角度项目中工作，在那里我遇到过需要验证具有文本框的自定义组件的情况。

<dollar-text-validate ng-model="ctrl.value" required name="myDir"></dollar-text-validate>

我的组件

angular.module（“myApp”，[]）;

    angular.module("myApp").controller('MyController',function(){
        var ctrl = this;
        ctrl.value = 56;
    });

    angular.module("myApp").component('dollarTextValidate',{
        bindings: {
            ngModel :'='
        },
        template: '<div><input type="text" ng-focus="ctrl.focus()" ng-blur="ctrl.blur()" ng-model="ctrl.amount1"><input type="hidden" ng-model="ctrl.ngModel"></div>',
        controller: function() {
            var ctrl = this;
            // ctrl.amount1 = 
            ctrl.amount1 =ctrl.ngModel===undefined||ctrl.ngModel==='' ? '' :'$'+ctrl.ngModel;
            console.log(ctrl.ngModel);
            ctrl.focus=function(){
                ctrl.amount1 = ctrl.amount1 === undefined ? '' : ctrl.amount1.slice(1);
                ctrl.ngModel = ctrl.amount1;
                console.log(ctrl.ngModel);
            }

            ctrl.blur=function(){
                ctrl.ngModel = ctrl.amount1;
                ctrl.amount1 = ctrl.amount1==='' ? '' :'$'+ctrl.ngModel;
                console.log(ctrl.ngModel);
            }
        },
        controllerAs:'ctrl'
    })

此组件用于在输入值前设置$符号。因此$附加值将在文本框和原始值中可用，该值将在隐藏字段中进行验证。

如何验证隐藏字段。我尝试使用隐藏标签中的必需属性，但没有发生任何事情。也尝试使用自定义标记。

Answer 1

很抱歉打破它，但你可能想去指令，然后使用ngModelController的$ parsers，$ formatter和$ validators属性。

可以使用组件，但使用普通指令会更容易。

angular.module('myApp', []);

angular.module("myApp").directive('dollarTextValidate', function() {
  return {
    require: 'ngModel',
    link: function($scope, $element) {
      var regexp = /^\$(\d+(\.\d+)?)$/;
      var ngModel = $element.controller('ngModel');
      ngModel.$formatters.push(function(value) {
        return value ? '$' + value : '';
      });
      ngModel.$parsers.push(function(value) {
        var matched = value.match(regexp);

        if (matched) {
          return +matched[1];
        }
      });

      ngModel.$validators.greaterThan10 = function (modelVal, viewVal) {
        var value = modelVal || viewVal;
        
        return value > 10;
      };
    },
    controllerAs: 'ctrl'
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="myApp" ng-form="form">
  dollar-text-validate = <input dollar-text-validate ng-model="value" required name="myDir"><br>
  number input = <input type="number" ng-model="value" required><br>
  value = {{value}}<br>
  errors = {{form.myDir.$error}}
</div>

以角度1.5验证自定义组件

1 个答案: