AngularJs: Required field validation and highlight for dynamic rows of HTML table with contenteditable

Question

I have an HTML table as below:

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

Answer 2

The thing is the <td> is not working. Try first with just one and see how you can do it for N columns and N rows correctly.

When someone clicks save, you can pass the rows array and add a valid/invalid boolean value inside that object, then use ng-class to highlight that cell or not, depending on the result.

<td contenteditable="true" ng-model="r.value"
    ng-class="r.invalid ? 'cell-highlighted' : ''">
</td>

$scope.save = function(rows, columns) {
    rows.forEach(row => {
        if (!row.value || row.value.trim() === '') {
            row.invalid = true;
        } else {
            row.invalid = false;
        }
    })
    alert('please fill table data');
};

I have modified your fiddle with these changes, I hope you can use it.

http://jsfiddle.net/4t85gw1z/