AngularJs: validação de campo obrigatório e destaque para linhas dinâmicas da tabela HTML com conteúdo editável
Eu tenho uma tabela HTML como abaixo:
<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>
Estou usando a diretiva contenteditable para tornar as células editáveis.
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
});
}
};
}]);
Você pode ver o Jsfiddle aqui:http://jsfiddle.net/u1vbeos5/144/
Clique para adicionar coluna e isso adicionaria coluna dinâmica. Comece a digitar na linha 1, depois que ela criará automaticamente outra linha dinâmica.
O que eu quero agora é adicionar a validação de campo obrigatória para cada linha, para que quando alguém clicar em salvar, ele ative a validação e destaque todas as linhas vazias.
Não tenho certeza de como podemos fazer isso. Acredito que precisamos fazer algo no final da diretiva para descobrir a linha vazia e destacá-la.
Alguma entrada?
obrigado