0

All,

I have a form inside an Angular controller. But the name of that form is dynamically-generated (by Django) from the server. Does anybody know how I can access that form (w/ the intention of changing the validity of certain items after some interaction w/ the server).

Here is some code:

my_template.html:

<html>
  <div ng-app="MyApp">
    <div ng-controller="MyController as my_controller">
      <form name={{ form.form_name }}
        {% for field in form %}
          {{ field }}
        {% endfor %}
      </form>
      <button ng-click="do_something">do something</button>
    </div>
  </div>
</html>

my_view.py:

def my_view(request):
  form = MyForm(form_name=generate_a_random_string())
  return render_to_template({"form":form}
  return render_to_response('my_template.html', {"form": form})

my_app.js:

(function() {
    var app = angular.module("MyApp");
    app.controller("MyController", ['$scope', function($scope) {
      $scope.do_something = function() {
        /* OBVIOUSLY THIS DOESN'T WORK */
        /* BUT WHAT DO I REPLACE "my_form" WITH ? */
        my_form['some_field_name'].$setValidity('some_validity_type', false);
        my_form['some_field_name'].$setDirty();
      }
    }]);
});

If it helps, I am using django-angular to make my Django forms play nicely w/ Angular.

Thanks.

trubliphone
  • 4,132
  • 3
  • 42
  • 66
  • Not sure whether I got your question right, you should be able to get the form from `$scope.form.form_name` right? – Developer Dec 08 '16 at 17:12
  • Nope. If I try that I get `TypeError: Cannot read property 'form_name' of undefined`. I think I need to actually specify the name of the form. – trubliphone Dec 08 '16 at 17:16
  • Try removing the {{}} for form name. Just have it as form.form_name and then try getting it as I mentioned earlier – Developer Dec 08 '16 at 17:23

1 Answers1

0

The name of the form as in 

<form name="myForm">

will be reflected in your controller as a NgFormController of the same name

myController.myForm

I think part of the problem is that you have {{ form.form_name }} in your template which from what I can tell hasn't been initialized in your controller. You probably need to initialize your form names inside your controller first, then use an ng-repeat to build your form DOM elements and pull the name from there. Then you can access the NgFormController by using this.form_name inside your view controller.

jusopi
  • 6,791
  • 2
  • 33
  • 44
  • The double-brackets are from Django. In "my_view.py" I pass a Django Form with a form_name property to the "my_template.html" template. It is unfortunate that Django and Angular use the same syntax for variables. Just assume it is a value that has not been computed by Angular. – trubliphone Dec 08 '16 at 17:48
  • so once angular links the template to the controller, what does the name attribute look like? I assume `name="someName"` right? – jusopi Dec 08 '16 at 17:50
  • Yes. `
    `.
     – trubliphone Dec 08 '16 at 17:58
  • is there any common prefix/suffix? The only way I can think to get this without having a data construct is to get the keys off your controller and see if they fit a particular pattern, say MyCustom**Form** so that you know that key is unique to the django-created forms. Then you can access them through some loop. The other way is loop through all your keys and see if `this.myCustomForm instanceof NgFormController` or something of that nature – jusopi Dec 08 '16 at 18:03
  • Aha! I just figured it out (mostly). I can pass the name of the form to the controller function `do_something`. – trubliphone Dec 08 '16 at 18:07