Question

我想用指令创建的字段创建表单。数据的数据绑定工作正常，但验证不起作用。

这是html：

<body ng-controller="MainCtrl">
  <h1>form</h1>
  <form name="form">
      <div ng-repeat="conf in config">
          <div field data="data" conf="conf"></div>
      </div>
  </form>
  <pre>{{data|json}}</pre>
</body>

控制器和字段指令：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.data = {name: '', age: ''}
    $scope.config = [
        {field: 'name', required:true},
        {field: 'age'}
    ];
});

app.directive('field', function ($compile) {
    return {
        scope: {
            data: '=',
            conf: '='
        },
        link: function linkFn(scope, element, attrs) {
            // field container
            var row = angular.element('<div></div>');

            // label
            row.append(scope.conf.field + ': ');

            // field input
            var field = angular.element('<input type="text" />');
            field.attr('name', scope.conf.field);
            field.attr('ng-model', 'data.' + scope.conf.field);
            if (scope.conf.required) {
                field.attr('required', 'required');
            }
            row.append(field);

            // validation
            if (scope.conf.required) {
                var required = angular.element('<span>required</span>');
                required.attr('ng-show', 
                    'form.' + scope.conf.field + '.$error.required');
                row.append(required);
            }

            $compile(row)(scope);
            element.append(row);
        }
    }
});

问题是对字段name的验证不起作用，并且永远不会显示验证文本required。 form中的ng-show可能在指令中未知。但我不知道如何将表单传递给字段指令。你能帮我解决一下吗？感谢。

这是实时代码：http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview

Answer 1

Todo：

<强>之前：

$compile(row)(scope);
element.append(row);

<强>后：

element.append(row);
$compile(row)(scope);

设施的'planker'中的

p / s添加css：

.ng-invalid {
  border: 1px solid red;
}

Answer 2

您需要使用ng-form directive并将动态字段直接推送到表单对象。

此主题可以帮助您： https://github.com/angular/angular.js/issues/1404

Answer 3

这是一个从你的叉子分叉来修复你的问题： http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview

总结一下，我添加了一个手表，它将切换错误信息，而不是使用ng-show指令。当您尝试在指令链接中动态添加指令时，事情会变得很麻烦。对于一个简单的用例，可以更快地添加自己的手表。

您还可以查看此指令，该指令已预先配置为处理许多用例以进行验证，并允许您轻松创建自定义验证https://github.com/nelsonomuto/angular-ui-form-validation

var toggleRequiredErrorMessage = function (invalid) {
    if(invalid === true) {
        addRequiredErrorMessage();
    } else {
        removeRequiredErrorMessage();
    }
};
scope.$watch( watchIfRequired, toggleRequiredErrorMessage );

如何在angular指令中验证动态表单字段？

3 个答案: