AngularJs:必需的字段验证和突出显示具有contenteditable的HTML
我有一个
HTML表格如下:
<tbody> <tr ng-repeat="r in targetTable.rows"> <td contenteditable="true" class=""></td> <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id],r): undefined"> </td> </tr> </tbody> 我使用contenteditable指令使单元格可编辑. app.directive('contenteditable',['$sce',function($sce) { return { restrict: 'A',require: '?ngModel',link: function(scope,element,attrs,ngModel) { var disable = (attrs.contenteditable === "false") || !Boolean(attrs.contenteditable); if (!ngModel || disable) return; // do nothing if no ng-model // Write data to the model var read = function(value) { var html = element.html() || (typeof value === "string" ? value : ""); // When we clear the content editable the browser leaves a <br> behind // If strip-br attribute is provided then we strip this out if (attrs.stripBr && html == '<br>') { html = ''; } ngModel.$setViewValue(html); }; // Specify how UI should be updated ngModel.$render = function() { element.html($sce.getTrustedHtml(ngModel.$viewValue || '')); }; // Listen for change events to enable binding element.on('blur keyup change',function() { scope.$evalAsync(read); }); setTimeout(function() { read(ngModel.$modelValue); // initialize }); } }; }]); 你可以在这里看到Jsfiddle:http://jsfiddle.net/u1vbeos5/144/ 单击以添加列,它将添加动态列.在第1行开始输入后,它会自动创建另一个动态行. 我现在想要的是为每一行添加必需的字段验证,以便当有人点击保存时触发验证并突出显示所有空行. 我不知道我们怎么能这样做.我相信我们必须在指令端做一些事情来找出空行并突出显示它. 有什么投入? 谢谢 解决方法
无需更改您的指令,内置的ng-required已经可以使用.只需添加注释中提到的
form控制器即可.如果您不添加表单控制器,则需要在$scope.save上自行验证所有字段.
将ng-required添加到您的模特: <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id],r): undefined" ng-required="!$parent.$last"></td> ng-required = $parent.$last表示如果该字段不是最后一行,则该字段是必需的(我假设这是基于您添加行的方式).如果没有值,Angularjs将在td元素上设置类ng-invalid. 由于似乎没有表单,请将ng-form添加到表标记中.或者,这可以用表单标签包装,表单标签应该实现相同的目的. <table class="table table-bordered" ng-form="targetTableForm" ng-class="{submitted: targetTableSubmitted}"> 保存时,检查表单是否有效并将表单标记为已提交.这将根据上面的标记将提交的类添加到表中. $scope.save = function() { $scope.targetTableSubmitted = true; if ($scope.targetTableForm.$valid) { alert('submitted'); } else { alert('please fill table data'); } /** * If no form controller is defined,manually loop through all rows * and columns to check for a value */ }; 最后,添加css以突出显示表格单元格: .table.submitted td.ng-invalid { background-color: red; } 如果表单无效,另一种方法是禁用保存按钮. 请注意,“名称”列没有ng-model,因此不会绑定任何内容,因此不会对其进行验证. 见更新jsfiddle (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |