Dynamically add fields in row - AngularJS

dynamically-add-fields-in-row-angularjs.markdown

Dynamically add fields in row - AngularJS

A Pen by Sandeep Soni on CodePen.

License.

index.html

<div ng-app="add-row" ng-controller="MainCtrl">
  <form name="setupNewGrid">
   <fieldset  ng-repeat="column in columns">
      <input type="text" name="columnName" ng-model="column.name" name="" placeholder="Column Name" required>
     
   <select name="data_type" required> 
     <option value="">Data Type</option> 
     <option ng-repeat="type in dataType"  value="{{type.dataTypeName}}" ng-model="dataType.id">{{type.dataTypeName}}</option> 
    </select> 

     <input type="text" ng-model="column.dataFormat" name="" placeholder="Data Format" required>
     <input type="text" ng-model="column.excludedChar" name="" placeholder="Exculded Characters">
      <input type="text" ng-model="column.maxLength" name="" placeholder="Max Length">
     <input type="checkbox" ng-model="column.isKeyField"> Is Key Field
      <input type="checkbox" ng-model="column.isKeyRequired"> Is Required
     <button class="remove"  ng-click="removeColumn($index)">x</button> 
   </fieldset>
   <button class="addfields" ng-click="addNewColumn()">Add Column</button>
  <button class="addfields" ng-click="setupNewGrid">Validate</button>
</form>    
  <h4 class="msg" ng-model="column.textareaValue">TextareaValue : {{column.textareaValue}}</h4>
  <h4 class="msg">Column Name Validation : {{setupNewGrid.columnName.$valid}}</h4>
<h4 class="msg">Data Type Selected ID: {{dataType.id}} </h4>
<div class="msg">{{columns}}</div>
</div>

script.js

var app = angular.module('add-row', []);

  app.controller('MainCtrl', function($scope) {
    
//  $scope.dataType = ['type1', 'type2', 'type'];
      $scope.dataType = [
    {id: 1, colId:['col1', 'col4'], dataTypeName: 'Date'},
    {id: 2, colId:['col2', 'col3'], dataTypeName: 'Alpha'},
    {id: 3, colId:['col5', 'col6', 'col7', 'col8'], dataTypeName: 'List Value'}
  ];
  
 $scope.columns = [{colId: 'col1', name:'', dataType:[], dataFormat:'',  excludedChar:'', maxLength:'', isKeyField:false, isKeyRequired:false }];
  
  $scope.addNewColumn = function() {
    var newItemNo = $scope.columns.length+1;
    $scope.columns.push({'colId':'col'+newItemNo});
  };
    

  $scope.removeColumn = function(index) {
    // remove the row specified in index
    $scope.columns.splice( index, 1);
    // if no rows left in the array create a blank array
    if ( $scope.columns.length() === 0 || $scope.columns.length() == null){
      alert('no rec');
      $scope.columns.push = [{"colId":"col1"}];
    }
		
  
  };


  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>

style.css

body {font-family:arial;}
fieldset{
    background: #FCFCFC;
    padding: 16px;
    border: 1px solid #D5D5D5;
}
.addfields{
    margin: 10px 0;
}

.msg {
    padding: 10px;
    background: rgb(227, 250, 227);
    border: 1px solid rgb(171, 239, 171);
    color: rgb(9, 56, 9);
}
.remove{
    background: #ccc;
    color: #C76868;
    font-weight: bold;
    font-size: 18px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    padding: 2px 8px 5px;
    vertical-align: top;
    line-height: 100%;   
}
input[type="text"],
select{
    padding:5px;
}