加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 如何验证angular指令中的动态表单字段?

发布时间:2020-12-17 07:23:54 所属栏目:安全 来源:网络整理
导读:我想用指令创建的字段创建表单.数据的数据绑定正常工作但验证不起作用. 这是html: body ng-controller="MainCtrl" h1form/h1 form name="form" div ng-repeat="conf in config" div field data="data" conf="conf"/div /div /form pre{{data|json}}/pre/bod
我想用指令创建的字段创建表单.数据的数据绑定正常工作但验证不起作用.

这是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);
        }
    }
});

问题是字段名称的验证不起作用,并且永远不会显示所需的验证文本.可能是ng-show中的表格在指令中是未知的.但我不知道如何将表单传递给字段指令.你能帮我解决一下吗?谢谢.

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

去做:

之前:

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

后:

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

‘planker’中的p / s为设施添加css:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读