AngularJs: Required field validation and highlight for dynamic rows of HTML table with contenteditable
I have an HTML table as below:
-
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:
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.
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
- 热议问题
加载中...