Question

我想知道是否有可能在角度

这样的事情

<form name='form'>
  <input-directive-with-ngmessages1 ... inputname='field1' form='form' />
  <input-directive-with-ngmessages2 ... inputname='field2' form='form' />
</form>

我知道angular中的验证系统是基于表单名称工作的，但我想从输入中创建组件，在自定义输入指令中移动ng-messages，只将表单名称传递给它，可以获得整体表单验证状态，

我正在关注stackoverflow上的动态表单/验证，但是我没有找到类似上面的例子，thx提前

Answer 1

绝对可行。我的建议：要求ngModel制作自定义控件（如所述here），请对邮件使用转换。示例代码：

app.directive('inputDirectiveWithNgmessages', function() {
    return {
        restrict: 'E',
        template:
            '<input type="text" ng-model="ctrl.model" name="ctrl.inputname" />' + 
            '<div ng-messages="ctrl.$error" role="alert" ng-transclude>' +
                // element content, i.e. the messages will be transcluded here
            '</div>',
        transclude: true,
        scope: {},
        require: ['ngModel', 'inputDirectiveWithNgmessages'],
        link: function(scope, elem, attrs, ctrls) {
            var ngModel = ctrls[0];
            var inputDirectiveWithNgmessages = ctrls[1];
            inputDirectiveWithNgmessages.inputname = attrs.inputname;
            inputDirectiveWithNgmessages.setModel(ngModel);
        },
        controllerAs: 'ctrl',
        controller: function($scope) {
            var self = this;

            this.model = null;

            this.setModel = function(ngModel) {
                this.$error = ngModel.$error;

                ngModel.$render = function() {
                    self.model = ngModel.$viewValue;
                };

                $scope.$watch('ctrl.model', function(newval) {
                    ngModel.$setViewValue(newval);
                });
            };
        }
    };
});

用法非常简单 - 将消息放在元素中：

<input-directive-with-ngmessages ng-model="model1" inputname="field1" ng-required="true">
    <div ng-message="required">Required field</div>
</input-directive-with-ngmessages>

无需指定表单名称。

小提琴：http://jsfiddle.net/12sf82p3/

THE CATCH ：我们使用输入轻松使用的标准验证器，例如ng-pattern，请勿在此处开箱即用（ng-required除外）。你看ng-pattern不是指令;它由Angular的标准输入指令作为属性处理。解决方法是将您想要的验证器实现为指令并将它们放在<input-directive-with-ngmessages>上，例如：

<input-directive-with-ngmessages ng-model="..." inputname="..." my-pattern="[A-Z][0-9]">

my-pattern指令将使用$validators的标准ngModel管道来实现正则表达式验证。

这样做的好处是可以调整指令的模板以满足任何需要。例如。它可以为Twitter的Bootstrap创建表单元素标记。

最后，您可能需要查看egkyron表单验证的替代方法，即基于模型的验证。

带有ng-message验证的输入指令

1 个答案: