在 Angular 1.5 中验证自定义组件

Question

我在 Angular 项目中工作，遇到了一种情况，我需要验证具有文本框的自定义组件。

<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'
    })

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

如何验证隐藏字段。我尝试在隐藏标签中使用 required 属性，但没有任何反应。也尝试使用自定义标签。

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>