0

I am trying to use ng-include and ng-submit for the first time. I have been trying to follow this SO question Why form undefined inside ng-include when checking $pristine or $setDirty()?. Here is how I have structured my index.html:

<div id="info" ">
   <div ng-include src="'standard.html'" ng-controller="FormController as formcontrol"> 
</div>
</div>

In my standard.html

<uib-accordion close-others="oneAtATime"> <uib-accordion-group
    heading="{{person.personID}}" ng-repeat="person in people.info">
<form name="formHolder.personForm>

    <div class ="form-group">
      <input type="text" name="name"
      class="form-control" 
      ng-model="person.name"
      ng-readonly="person.name">
    </div>

    ----------
  </form>
<button type="button" ng-submit="updateStatus(person.personID)"
    class="btn btn-success btn-lg btn-block">Update</button>

Similarly, I have 20 more fields, of which only 4 are editable fields. Once user click update button, I want to get all the form data into an ajax call which is being made within the FormController.

In my FormController:

(function() {
    angular.module('peopleInfo2').controller('FormController', ['$http','$scope', function($http, $scope) {                 

        $scope.formHolder = {};
        $scope.updateStatus =function (personID) {
            console.log($scope.formHolder);
        };
    }]);        
})();

Questions:

a) form does not get invoked when I use ng-submit, but it does when I use ng-click. I have read the differences between them and everywhere they say that I should use ng-submit. What am I doing wrong?

b) Currently, if I use ng-click then the data in $scope.formHolder is a personForm object, which has my data, all in object form within updateStatus function. Why am I not able to access them like deviceForm.personID? Why does it give me values like $modelValue and $viewValue instead of just the value bounded to ng-model in form?

c) If I use ng-click, then whenever form is submitted. it just picks up value from the last entry in the person.info array. Meaning that no matter what, only last value read by ng-repeat is accessible when trying to read values of ng-model. Why?

I will appreciate any help. I am close to get this thing, but I want to make sure that I understand things correctly as it will be used throughout the project. I was trying to use a custom directive earlier, but was suggested that that approach is not correct to render web forms and should use ng-include. Thank You.

Community
  • 1
  • 1
user3044240
  • 621
  • 19
  • 33

1 Answers1

0

There are some problems in your code but as the first one I think you should use ng-submit directive on your form tag. like this:

<form name="{{formHolder.personForm}}" ng-submit="updateStatus(person.personID)">...</form>

with an <input type="submit" class="btn btn-success btn-lg btn-block"/> for the submit button inside your form.

But why don't you use the ng-repeat inside your form and pass the whole array to your submit function?

KavehG
  • 303
  • 1
  • 2
  • 11
  • I have put this now inside the form `` and moved `ng-submit="updateStatus(person.personID)"` with form declaration.. but the `updateStatus` function is not getting fired. Also, may I know the reason for using expression for form name `"{{formHolder.personForm}}"` please? – user3044240 Feb 16 '16 at 16:49
  • @ KavehG my bad.. I had a wrong war file deployed. That works. It fires the `updateStatus` function. As per your `ng-repeat` question, I want to first display the heading of an accordion by using `person in people.info`. So each of the headings then expands, displaying the form which has entries for that specific clicked personID. So I thought that I should first display the headings for accordion and then display the form associated with that accordion. Is that wrong thinking or design? Also, on firing `updateStatus` I cant get the updated values from the form still. – user3044240 Feb 16 '16 at 17:04
  • It does get the updated values now. Thank you for your help. I am stuck on serializing the form values but I think I can try to work on it and resolve it. – user3044240 Feb 16 '16 at 19:16