AngularJs:具有 contenteditable 的 HTML 表格动态行的必填字段验证和突出显示 [英] AngularJs: Required field validation and highlight for dynamic rows of HTML table with contenteditable

问题描述

我有一个 HTML 表格，如下所示:

I have an HTML table as below:

<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 指令使单元格可编辑.

I am using the contenteditable directive to make the cells editable.

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/

You can see the Jsfiddle here: http://jsfiddle.net/u1vbeos5/144/

点击添加列，会添加动态列.在第 1 行开始输入，之后它会自动创建另一个动态行.

Click to add column and it would add dynamic column. Start typing in row 1, after it will automatically create another dynamic row.

我现在想要的是为每一行添加必填字段验证，这样当有人点击保存时，它会触发验证并突出显示所有空行.

What I want now is to add required field validation for each row so that when someone clicks save it triggers validation and highlights all empty row.

我不确定我们如何才能做到这一点.我相信我们必须在指令末尾做一些事情来找出空行并突出显示它.

I am not sure how can we do this. I believe we have to do something at the directive end to find out empty row and highlight it.

任何输入?

谢谢

推荐答案

无需更改您的指令，内置的 ng-required 已经可以工作了.只需添加一个 form 控制器，如评论中所述.如果您不添加表单控制器，则需要自己验证 $scope.save 上的所有字段.

No need to change your directive, the built-in ng-required already works. Just add a form controller as mentioned in the comments. If you don't add a form controller, you will need to validate all fields yourself on $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-required=$parent.$last means the field is required if it is not the last row (I've assumed this based on how you add rows). Angularjs will set the class ng-invalid on the td element if there is no value.

因为好像没有表格，把ng-form添加到表格标记中.或者，这可以用一个 form 标签包装起来，它应该实现同样的目的.

Since there does not seem to be a form, add ng-form to the table markup. Alternatively, this can be wrapped with a form tag which should achieve the same thing.

<table class="table table-bordered"
    ng-form="targetTableForm"
    ng-class="{submitted: targetTableSubmitted}">

保存时，检查表单是否有效并将表单标记为已提交.这将根据上面的标记将 submitted 类添加到表中.

On save, check if the form is valid and mark the form as submitted. This will add the submitted class to the table based on the markup above.

$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 以突出显示表格单元格:

Then finally, add css to highlight the table cell:

.table.submitted td.ng-invalid {
  background-color: red;
}

如果表单无效，另一种方法是禁用保存按钮.

Another approach would be disable the save button if the form is invalid.

请注意，Name 列没有 ng-model，因此不会绑定到任何内容，因此不会进行验证.

Note that the Name column does not have an ng-model so it won't be bound to anything and so it wont be validated.

查看更新的jsfiddle

这篇关于AngularJs:具有 contenteditable 的 HTML 表格动态行的必填字段验证和突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！