AngularJS and ModelForm: Submit button not working

Question

The page is supposed to display the contents of the database in a table, with a "New" button to add a new entry to the db. When the user clicks the "New" button, a form appears below. It is a ModelForm for the user to input a new entry to the Model, and then submit via a "Submit" button below. This was working as expected, until I added in an AngularJS controller to handle the button click of "New". The problem is my "Submit" button does not work. I want it to submit the data to the ModelForm, but it appears to do nothing.

Here is my template:

{% extends "base.html" %}


{% block content %}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-10 col-sm-offset-1">
      <h2>Ratings</h2>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Beer Name</th>
            <th>Beer Rating</th>
            <th>Notes</th>
            <th>Brewer</th>
          </tr>
        </thead>
        <tbody>
          {% for rating in ratings %}
          <tr>
            <td>{{ rating.beer_name }}</td>
            <td>{{ rating.score }}</td>
            <td>{{ rating.notes }}</td>
            <td>{{ rating.brewer }}</td>
            <td><a href="{% url 'rating-edit' rating.id  %}" class="btn btn-primary" value="{{ rating.id }}" name="edit">Edit</a></td>
            <td><a class="btn btn-primary" href="{% url 'rating-delete' rating.id  %}" value="{{ rating.id }}" name="delete" >Delete</a></td>


            </tr>
            {% endfor %}
          </tbody>
        </table>
        <div ng-app="myApp" ng-controller="myCtrl">
          <a ng-model="buttonClick" ng-click="is_clicked()" class="btn btn-primary">New</a>


          <div ng-show="buttonClick" ng-cloak>
            <div class="container-fluid">
              <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                  <h2>Enter a new rating</h2>
                  <form role="form" method="post">
                    {% csrf_token %}
                    <p>Beer Name: <input type="text" ng-model="myForm.beer_name"></input></p>
                    <p>Score: <input type="number" step="0.1" ng-model="myForm.score"></input></p>
                    <p>Notes: <input type="text" ng-model="myForm.notes"></input></p>
                    <p>Brewer: <input type="text" ng-model="myForm.brewer"></input></p>
                    <p><button ng-click="submit_to_form(myForm)" type="submit" class="btn btn-primary">Submit</button></p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http){
    $scope.myForm = {beer_name:'beer_name', score:'score', notes:'notes', brewer:'brewer'};
    $scope.buttonClick = false; 
    $scope.is_clicked = function() {
      $scope.buttonClick=true;
      console.log($scope.buttonClick)
    }
    $scope.submit_to_form = function(data) {
      $http.post('rating-home', data);
    }
  })
  </script>
  {% endblock %}

And urls.py:

from django.conf.urls import url
from django.contrib import admin

from ratings.views import home, RatingCreate, delete, edit

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', RatingCreate.as_view(), name='rating-home'),
    url(r'rating/add/$', RatingCreate.as_view(), name='rating-add'),
    url(r'rating/delete/(?P<row_id>[0-9]+)/$', delete , name='rating-delete'),
    url(r'rating/edit/(?P<row_id>[0-9]+)/$', edit , name='rating-edit'),
]

And views.py for the Submit button:

class RatingCreate(View):
    """ Create a new Rating """
    form_class = RatingForm
    template_name = 'home.html'

    def get(self, request):
        form = self.form_class()
        context = {'ratings': Rating.objects.all(), 'form': form}
        #return render(request, 'home.html', context)
        return render(request, self.template_name, context)

    def post(self, request):
        form = self.form_class(request.POST)
        if form.is_valid():
            _ = form.save()
            return redirect('rating-home')
        return render(request, self.template_name, {'form: form'})

Ahmad Mobaraki · Accepted Answer · 2016-04-18 05:32:43Z

2

You should handle submitting the form with angular

<form ng-submit="myFunc(myData)">
    <input type="text" ng-model="myData.name">
    <input type="text" ng-model="myData.phone">
    <button type="submit">Submit</button>
</form>

OR

<form >
    <input type="text" ng-model="myData.name">
    <input type="text" ng-model="myData.phone">
    <button ng-click="myFunc(myData)">Submit</button>
</form>

and your controller:

 var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope){
    $scope.myData= {name:'' , phone:''};  
    $scope.myFunc = function(data) {
      console.log(data);
      // data(myData array) can be send with angular $http.post() method 
      // e.g. : $http.post('/myUrl/', data)
    }
  })

Update:

Here is a good tutorial for angular $http service!

edited Apr 18, 2016 at 5:32

answered Apr 18, 2016 at 4:11

Ahmad Mobaraki

8,2485 gold badges54 silver badges75 bronze badges

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

10 Comments

user3251349 Over a year ago

And then how does angular submit that info to the form? So how would myFunc() work?

user3251349 Over a year ago

So once I collect all of the fields, how do I bundle them back up into a form in myFunc()?

user3251349 Over a year ago

Thanks! I've updated my code, but I think I'm still missing something.

Ahmad Mobaraki Over a year ago

you should inject $http service to your controller function($scope, $http)

Ahmad Mobaraki Over a year ago

was my mistake! try : $scope.myData={name:'' , phone:''}; as an object

|

Collectives™ on Stack Overflow

AngularJS and ModelForm: Submit button not working

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related