8

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

这是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

4

3 回答 3

5

去做：

前：

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

后：

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

设施的“planker”中的 p/s 添加 css：

.ng-invalid {
  border: 1px solid red;
}
于 2013-12-10T12:47:22.493 回答
2

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

这个线程可以帮助你： https ://github.com/angular/angular.js/issues/1404

于 2013-07-23T14:12:39.167 回答
0

这是一个从你那里分叉的 plunker 来解决你的问题： 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 );
于 2014-06-23T17:08:53.970 回答