AngularJs: Adding dynamic row, preventing duplicates

Question

I have created a html table that user can add dynamic columns and rows. When you click on add column it adds a column and when you start typing in the first row it should create a new row.

Here is my jsfiddle: http://jsfiddle.net/ydevb1Lx/

There are some issues with add row here. When user types something I am creating a new row. But when the user types in second letter it again creates another row and so on. Also on backspace it again creates a new row. Not sure whats going on here.

Second thing which I am not able to find out is how can I validate the table so that only the ID column does not have any duplicate. Since I am using ng-change event how can I check whether there already exists the same ID in the table and show some kind of alert. Below is the relevant code:

HTML Table:

 <table class="table table-bordered" ng-form="targetTableForm" ng-class="{submitted: targetTableSubmitted}">
      <colgroup>
        <col class="unique-id">
      </colgroup>
      <thead>
        <tr>
          <th class="unique-id">Name #</th>
          <th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
          <!--<th class="view-next-set"><a href="#">...</a></th>-->
          <td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="r in targetTable.rows">
          <td contenteditable="true" ng-model="r.tableId"  ng-change="r.tableId? addNewRow(r.tableId, r): undefined"></td>
          <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-required="!$parent.$last"></td>
          <!--<td class="blank" colspan="2"></td>-->
        </tr>
      </tbody>
    </table>

Code used to create add row:

  $scope.addNewRow = function(value, row) {
    if (!value || value === "" || typeof value !== 'string') return;
    $scope.targetTable.rows.push({});

    row.id = $scope.targetTable.uniqueIdCounter++;
  };

Below is how I initialize array:

  var table = {
  id: 0,
  name: "table 1",
  columns: [],
  rows: [{}],
  uniqueIdCounter: 1037
};

$scope.tables = [table];
$scope.targetTable = $scope.tables[0];

Lasithe · Accepted Answer · 2018-08-07 06:13:16Z

1

Check if the last row value is empty or not before adding a new row in addNewRow. If empty don't add. Issue you had was you are calling the addNewRow function in ng-change. It calls the function every time you change the input value. But you didn't check if the latest row is empty or not.

For the second question you can use ng-blur directive. I have created two extra functions checkIDforDups to add a css class and checkForDups to check for duplicates in tableId.

Here's the Jsfiddle: http://jsfiddle.net/ydevb1Lx/51/

edited Aug 7, 2018 at 6:13

answered Aug 6, 2018 at 19:54

Lasithe

2,9403 gold badges19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aman Over a year ago

Did some testing on this, this works and I can see no extra row is being added here. But what about my second question of adding duplicate in the ID column. I want to validate if the user has already made an entry of some value . If so I want to show some error. How can I handle the same on the onchange event.

Lasithe Over a year ago

@user1563677 Oh I have completely missed it. I updated my answer with a snippet.

Patharraj · Accepted Answer · 2018-08-07 07:01:54Z

0

check the condition before push the rows value.length ==1

if(value.length ==1){

     $scope.targetTable.rows.push({});
}

answered Aug 7, 2018 at 7:01

Patharraj

512 bronze badges

2 Comments

Lasithe Over a year ago

Why do you check value.length to be equal to 1?

Patharraj Over a year ago

if value.length is one that time only new object push in that array

Collectives™ on Stack Overflow

AngularJs: Adding dynamic row, preventing duplicates

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related