AngularJs:必需的字段验证并突出显示具有内容可编辑内容的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 :
<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.
请注意,名称"列没有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:必需的字段验证并突出显示具有内容可编辑内容的HTML表的动态行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!