Clear fields from a dynamic form in AngularJS

Question

here is my angularjs code:

function addController($scope, $http) {
  $scope.update = [];
  $scope.properties = [];

  $scope.addProperties = function(property) {
    $scope.properties.push({});
  }
  $scope.add = function() {
    $scope.update.push({
      "tableName": $scope.tableName,
      "name": $scope.name,
      "properties": $scope.properties
    });
    $scope.tableName = undefined;
    $scope.name = undefined;

  }

}

<!DOCTYPE html>
<html ng-app>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-controller="addController">

  <div class="col-sm-10">
    <label class="control-label">TableName:</label>
    <input type="text" class="form-control" ng-model="tableName" /><br />
  </div>

  <div class="col-sm-10">
    <label class="control-label">Name:</label>
    <input type="text" class="form-control" ng-model="name" /><br />
  </div>

  <div class="col-sm-10">
    <label class="control-label">Properties:</label>
    <fieldset ng-repeat="property in properties track by $index">
      <label class="control-label">Column Name:</label>
      <input type="text" class="form-control" ng-model="property.columnName" /><br />
      <label class="control-label">Name:</label>
      <input type="text" class="form-control" ng-model="property.name" /><br />

    </fieldset>
    <button class="btn btn-default" ng-click="addProperties()">Add Properties</button>
  </div>
  <div class="col-sm-10">
    <input type="submit" ng-click="add()" />
    <pre>{{update[0]|json}}</pre>
  </div>
</body>

</html>

Here ColumnName and name are dynamic textboxes added by click of addProperties button.

My problem is in add() function. once the form elements are pushed to update(array) i want form elements to be cleared. tableName and name were assigned to undefined since they are not dynamic and works fine. can you help me in assigning columnName and name fields to null or undefined.(special note: assigning to null or undefined must only affect the view. values pushed inside the update array must not change)

yes . i just want to empty fields after pushing elements to update array. — swaroop sg, Mar 07 '17 at 10:05
Try not to use null or undefined just use empty strings "" you could encounter problems will null / undefined later on down the line. — Evan Burbidge, Mar 07 '17 at 10:12

score 0 · Answer 1 · answered Mar 07 '17 at 10:11

Update your addProperties method to this.

    $scope.addProperties = function (property) {
        $scope.properties.push(property);
        $scope.property = {name:"", columnName:""}
    }

That will reset the property in the view, i'd also not use an ng repeat on the props in your view so you will only have one set of inputs to edit.

score 0 · Answer 2 · answered Mar 07 '17 at 10:33

You should clean your property object after pushing:

$scope.addProperties = function(property) {
    $scope.properties.push(property); 
    property = {"name": null, "columnName": null};
}

Note: Avoid using undefined to clean object as it said the property is... not defined!

Clear fields from a dynamic form in AngularJS

2 Answers2