CODEWITHSUNDEEP
angularjsformsangularjs-ng-repeat
bluevman
bluevman

Reputation: 63

How to clear dynamic ng-repeat form fields

Question: How do you clear a dynamically created ng-repeat AngularJS form field? If you can find a place I didn't look for the answer to this, I'd be surprised.

Background: I have AngularJS pulling JSON through a Service into my controller. I then use scope to ng-repeat labels for a form. I am having trouble clearing the fields. Since words don't accurately tell you what I am doing here is the basic code setup. I hacked it down to a few lines.

I've tried the old $scope.formName.inputName=""; and $scope.inputName="";, but they don't work. Any ideas or a direction to go?

http://plnkr.co/edit/BtID7a8EnyxuxClwdHkS?p=preview

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
    <form name="formName" id="formName" style="width: 320px">
        <div ng-repeat="item in currentInfo.attribute">
            <div style="float:left;">{{item.desc}} </div>
            <div style="float:left;">
                <input name="forminput" ng-model="forminput" style="width:200px" type="text" value=""/>
            </div>
        </div>
        <button value="Clear" style="float:left;" ng-click="clearMe()">Clear</button>
    </form>
</body>
</html>

var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
    {
        "name": "ACCT",
        "desc": "Account #",
    },
    {
        "name": "FNAME",
        "desc": "First Name",
        "type": "VARCHAR",
        "validation": "^[a-zA-Z\\s]+"
    },
    {
        "name": "LNAME",
        "desc": "Last Name",
        "type": "VARCHAR",
        "validation": "^[a-zA-Z\\s]+"
    },
    {
        "name": "MNAME",
        "desc": "Middle Name",
        "type": "CHAR",
        "validation": "^[a-zA-Z]+[1-9]+"
    }
]
};
$scope.clearMe = function (){
    $scope.forminput = "";
};
});

Upvotes: 5

Views: 7062

Answers (3)

Jakub Janošt&#237;k
Jakub Janošt&#237;k

Reputation: 186

You were on the right path, but with slight bug. All of the generated forms were bind to same model - forminput. You have to generate model binding dynamically.

<input name="forminput" ng-model="formmodel[item.name]"/>

and in the controller

$scope.formmodel = {};

check out the plunkr

Also, for generated forms check out projects as autofields, no need to reinvent the wheel.

Upvotes: 0

rom99
rom99

Reputation: 799

If I understand, you want to clear all fields in the form on clicking the 'clear' button?

Here's a working version:

http://plnkr.co/edit/f0QSDKH7qkM8CcZRU5Js?p=preview

var app = angular.module("app", []);

app.controller("AppTest", function($scope) {
  $scope.currentInfo = {
    "attribute": [
        {
            "name": "ACCT",
            "desc": "Account #",
        },
        {
            "name": "FNAME",
            "desc": "First Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "LNAME",
            "desc": "Last Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "MNAME",
            "desc": "Middle Name",
            "type": "CHAR",
            "validation": "^[a-zA-Z]+[1-9]+"
        }
    ]
  };
  $scope.clearMe = function (){
    for(var i = 0; i < $scope.currentInfo.attribute.length; i++) {
      $scope.currentInfo.attribute[i].forminput = '';
    }
  };
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="app.js"></script>
  </head>

  <body ng-app="app" ng-controller="AppTest as app">
    <h1>Hello Plunker!</h1>
    <form name="formName" id="formName">
      <div ng-repeat="item in currentInfo.attribute">
          <div style="float:left;">{{item.desc}} </div>
                <div style="float:left;"> <input name="forminput" ng-model="item.forminput" style="width:200px" type="text" value=""/>
      </div>
      </div>
      <button value="Clear" ng-click="clearMe()">Clear</button>
    </form>

  </body>

</html>

I've used the currentInfo model itself to bind the value of the inputs. This means they'll be available outside of the scope of the ng-repeat. Then the clear function iterates through each item in the 'attributes' array and sets the value to empty string.

Upvotes: 0

A.B
A.B

Reputation: 20445

You are repeating a single ngmodel="forminput" use unique for each by making forinput an object and creating unique models with keys ng-model="forminput[item.desc]"

first in your controller

 $scope.forminput = {};

then in view, change input as

Demo:

// Code goes here

var app = angular.module("app", []);

app.controller("AppTest", function($scope) {
   $scope.forminput = {};
  $scope.currentInfo = {
    "attribute": [
        {
            "name": "ACCT",
            "desc": "Account #",
        },
        {
            "name": "FNAME",
            "desc": "First Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "LNAME",
            "desc": "Last Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "MNAME",
            "desc": "Middle Name",
            "type": "CHAR",
            "validation": "^[a-zA-Z]+[1-9]+"
        }
    ]
  };
  $scope.clearMe = function (){
    console.log("herleme")
    $scope.forminput = {};
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="AppTest as app">
    <h1>Hello Plunker!</h1>
    <form name="formName" id="formName">
      <div ng-repeat="item in currentInfo.attribute">
          <div style="float:left;">{{item.desc}} </div>
				<div > <input name="forminput[item.desc]" ng-model="forminput[item.desc]" style="width:200px" type="text" value=""/>
      </div>
      </div>
      <button value="Clear" ng-click="clearMe()">Clear</button>
    </form>
      
  </body>

<input name="forminput[item.desc]" 
ng-model="forminput[item.desc]" 
style="width:200px" type="text" value=""/>

and clearing it as

  $scope.clearMe = function (){
    console.log("herleme")
    $scope.forminput = {};
  };

Upvotes: 3

Related Questions