1

I have an HTML table as below:

<table class="table table-bordered">
  <tr>
    <th>User Id</th>
    <th>Name</th>
    <th>Address</th>
    <tr>
      <tr ng-repeat="item in respose">
        <td contenteditable="true">{{item.userId}}</td>
        <td contenteditable="true">{{item.name}}</td>
        <td contenteditable="true">{{item.address}}</td>
      </tr>
</table>

I am using the following contenteditable directive:

app.directive('contenteditable', ['$sce', function($sce) {
  return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
    }
  };
}]);

The setup can be seen as: http://jsfiddle.net/cazfs31L/

Since the cells of the table are editable, I want to add validation to these cells to restrict the data that is being entered to them. The tricky part being I want to add validation based on the column header if possible. E.g. if the header is "Name" add different validation as compared to "Id" header/column.

I am just showing 3 columns in my demo but there can be more columns and more rows. Also, I don't want to use a textbox instead of cells here.

Any ideas how can I add validation here?

Rick
  • 4,030
  • 9
  • 24
  • 35
user1563677
  • 713
  • 3
  • 15
  • 38
  • just add another attribute ` – Ilia Jul 16 '18 at 16:53
  • i used a row, but the same for column – Ilia Jul 16 '18 at 16:54
  • @llia would you be able to give me an example, I am not sure about what you posted above. – user1563677 Jul 16 '18 at 16:59
  • 1
    so, this is your td `{{item.userId}}`, inside directive you can access to data-column via attrs `link: function(scope, element, attrs, ngModel) { console.log(attrs.column); }` – Ilia Jul 16 '18 at 17:04
  • @llia with your code I can get the column name in the directive, see my updated fiddle: http://jsfiddle.net/aman1981/4p125zmt/5/ How can add validation to the rows now? My questions was to look at the column header and then apply validation to the rows accordingly for that column. – user1563677 Jul 16 '18 at 17:14
  • how the validation supposed to work? – Ilia Jul 16 '18 at 17:47
  • Its based on the column. For ex: if the column name is "userid" then no numbers allowed. If the column is "name" no numbers or spl chars allowed. I should be able to adjust the validation. Just need headsup on how to setup the validation based on column and apply to row. – user1563677 Jul 16 '18 at 17:51
  • data-column should be added on td, not on th – Ilia Jul 16 '18 at 17:55
  • 1
    then you can use 'keypress' event to handle user's action on element, ie `element.on('keypress', (e) => {if (attrs.column === '') e.preventDefault()); }` – Ilia Jul 16 '18 at 18:00
  • Thanks. I got it now. See my updated JsFiddle: http://jsfiddle.net/aman1981/4p125zmt/31/ Any better way to apply regex or this is fine? – user1563677 Jul 16 '18 at 18:52
  • 1
    regex is ok, you can make bit simpler `/^[A-z]$/` – Ilia Jul 16 '18 at 18:58
  • [`[A-z]` also matches](https://stackoverflow.com/a/29771926/3832970) some non-letters. – Wiktor Stribiżew Jul 22 '19 at 09:10

0 Answers0