How to display the same form multiple times?

Question

I am trying to make a form which displays after clicking the button "Click to enter Observations". The same form should appear when the "Next Observation" Button is clicked. This should happen in a loop until I click the "Finish" Button.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>

<div ng-show="showMe">
    <br> <br> <form>
    Detailed Observation <input type="text">
    <button type="submit" ng-click="myFunc()"> Next Observation </button>
    <button type="submit"> Finish </button>
    </form>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = true;
    }
});
</script>
</body>
</html>

Mosh Feu · Accepted Answer · 2020-06-21T08:59:31.887

If I understand you correctly, you don't need to change the UI (e.g. render the form again or something) but reset the form after every "next" click.

If so, my suggestion is to hold an array of observations. Clicking on "next" will push the input's value into this array and clear the input. Clicking on finish will do something (log currently) with the array.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>

<div ng-show="showMe">
    <br> <br> <form>
    Detailed Observation <input type="text" ng-model="observation">
    <button type="submit" ng-click="nextObservation()"> Next Observation </button>
    <button type="submit" ng-click="finish()"> Finish </button>
    </form>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.observations = [];
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = true;
    }
    $scope.nextObservation = function() {
      if ($scope.observation) {
          $scope.observations.push($scope.observation);
          $scope.observation = '';
      }
    }
    
    $scope.finish = function() {
        $scope.nextObservation();
        console.log($scope.observations);
    }
});
</script>
</body>
</html>

Update

In order to keep the previous values but add a new one on click on "next", you can use that array with ng-repeat to render the ui based on that array. Notice that you need track by $index this time to avoid entities duplications (For more info: https://stackoverflow.com/a/26518721/863110)

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <form>
      Vendor Name: <input type="text"> <br> <br> Vendor Details: <textarea> </textarea> <br> <br>
      <button ng-click="myFunc()">Click to enter Observations</button>
    </form>

    <div ng-repeat="observation in observations track by $index">
      <br> <br>
      <form>
        Detailed Observation <input type="text" ng-model="observations[$index]">
        <button type="submit" ng-click="nextObservation($index)" ng-if="$last"> Next Observation </button>
        <button type="submit" ng-click="finish()" ng-if="$last"> Finish </button>
      </form>
    </div>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.observations = [];

      $scope.myFunc = function() {
        $scope.observations.push('');
      }
      $scope.nextObservation = function($index) {
        $scope.observations[$index]
        if ($scope.observations[$index]) {
          $scope.observations.push('');
        }
      }
      $scope.finish = function() {
        console.log($scope.observations);
      }
    });
  </script>
</body>
</html>

Thank you for the help. It solves my purpose. However, I need to change the UI as well, as mentioned in the initial problem. — Dharna Khandelwal, Jun 21 '20 at 07:24
`I need to change the UI as well` - how? What should be changed in the UI? — Mosh Feu, Jun 21 '20 at 07:28
I want the "Detailed Observation" form to appear again and again till the time I do not click the finish button. — Dharna Khandelwal, Jun 21 '20 at 07:34
Do you mean that eventually there will be **multiple** forms? Means, when click on next a form will be **added** rather than **replace** the current one? — Mosh Feu, Jun 21 '20 at 07:46
Glad to hear :) Please [accept](https://stackoverflow.com/help/someone-answers) the answer so it might help to other people. @DharnaKhandelwal — Mosh Feu, Jun 22 '20 at 13:29
Thanks for accepting the answer. It's SO important A. for future askers B. And not less important give a good feedback to the person who give their time for free. Keeps going that way! — Mosh Feu, Jun 22 '20 at 13:34
I am now struggling with changing the same code to angular 9 as the requirement of my team has changed. — Dharna Khandelwal, Jun 22 '20 at 13:37
I'm not very familiar with Angular (2+), I moved to React. You can start implement it and where you get stuck, ask a new question and I'll try to help. — Mosh Feu, Jun 22 '20 at 13:56

How to display the same form multiple times?

1 Answers1