AngularJs:必需的字段验证和突出显示具有contenteditable的HTML表的动态行

Question

我有一个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行开始输入后,它会自动创建另一个动态行.

我现在想要的是为每一行添加必需的字段验证,以便当有人点击保存时触发验证并突出显示所有空行.

我不知道我们怎么能这样做.我相信我们必须在指令端做一些事情来找出空行并突出显示它.

有什么投入？

谢谢

Answer 1

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.

Add ng-required to your model:

<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 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.

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}">

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
      */
  };

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.

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.

See updated jsfiddle