pulling user input from modal form (angular)

Question

I currently have a modal form setup and working nicely how i want it but now i need to grab the information inputed into textboxes and selections by the user and im sort of lost as to where i need to start. below is the code for my modal form in entirity. I'm not necessarily looking for a direct answer but to be pointed in the right direction of more information though examples would be greatly appreciated.

<div ng-app='plunker' ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3>Create a new post</h3>
    </div>
    <form name="modalForm">
    <div class="modal-body">
      <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
        <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" placeholder="Post Title" required/><br>
        <textarea name="modalInput" class="form-control" rows="10" maxlength="1000" form="modalForm" ng-model="data.myNumber2" placeholder="Post Body" required></textarea><br>
        <label for="sel1">Select category:</label>
            <select name="modalInput" class="form-control" ng-model="data.myNumber3" id="sel1" required>
                <option value="" selected disabled>Please select</option>
                <option value='lifestyle'>lifestyle</option>
                <option value='travel'>travel</option>
                <option value='video'>video</option>
            </select><br>
        <input name="modalInput" type="url" class="form-control" size="10" ng-model="data.myNumber4" placeholder="http://www.postUrlHere.com"/>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">Submit</button>
      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    </div>
  </form>
  </script>
  <h1>GWAT Websites and Designs</h1>
  <button class="btn" ng-click="open()">Submit new post</button>
</div>
<script>
var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $uibModal, $log) {
  $scope.items = ['title', 'body', 'category', 'url'];

  $scope.open = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

edit:

var ModalInstanceCtrl = function($scope, $uibModalInstance, data) { 
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function() {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
};

myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
</script>

Are you looking to get the input, textarea and select values into the modal instance? — codemax
– codemax, Commented Apr 22, 2017 at 2:26
Ok, change the $scope.items = items; to $scope.data = data; and remove the $scope.selected object. Also, remove $scope.selected.item from $uibModalInstance. They don't exist anymore, that was why you couldn't open the modal. — codemax
– codemax, Commented Apr 22, 2017 at 2:51

codemax · Accepted Answer · 2017-04-22 02:30:36Z

1

If you are looking to send the $scope.data from the current page to a modalInstance, you will have to add a property to the resolve object.

$scope.open = function() {
  var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    controller: ModalInstanceCtrl,
    resolve: {
      data: function() {
        return $scope.data;
      }
    }
});

From the ModalInstanceCtrl, add "data" as a dependency, and you will be able to retrieve the relevant data.

answered Apr 22, 2017 at 2:30

codemax

1,35210 silver badges20 bronze badges

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

7 Comments

David Parsonson Over a year ago

yes im looking to get those values you mentioned in your previous comment. when I change the resolve to as you've listed above and add data as a dependancy the modal form no longer opens on clicking the button. i dont need the items array anymore as that came from an example but i cant seem to discard using that without breaking the form

codemax Over a year ago

I see. Could you update your question with the ModalInstanceCtrl code?

codemax Over a year ago

Are you passing the $scope.data from modal to main window or from main window to modal?

codemax Over a year ago

If possible, provide a plunker for this code. Should be straightforward to fix

David Parsonson Over a year ago

thankyou the changes effected above worked straight away. one quick question is how i now go about using 'data' is it just data.xyz

|

Collectives™ on Stack Overflow

pulling user input from modal form (angular)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related