CODEWITHSUNDEEP
formsangularjs
acme
acme

Reputation: 14856

How can I submit a AngularJS model the old-fashioned way?

In my Angular app I'm having a form bound to a model. The form does not have fields for all model properties. When the user hits the submit button I want to post the form the traditional way, not as AJAX request (I have to deal with an already existing server side script).

That basically works if I add a action to the form. But it obviously only submits the form with its present fields as it is, not the whole model just like it's done when using the $http service. And additionally it does not create name attributes.

How could I submit the form the old-school way with the full model data? Do I have to create the missing form fields on my own or is there a way to let Angular do that for me?

<script>
    angular.module('foobar', []).controller('ContentCtrl', ['$scope', function($scope) {
        $scope.content = {
            'title': 'Foo',
            'subtitle': 'Bar',
            'text': 'desc' // this field is missing in the form itself and therefore is not submitted
        };
    }]);
</script>

<form action="http://postcatcher.in/catchers/521c6510429f840200000169" method="post" ng-controller="ContentCtrl">
    <input type="text" name="est" ng-model="content.title" value="asdf">
    <input type="text" ng-model="content.subtitle">
    <button>submit</button>
    <a href="http://postcatcher.in/catchers/521c6510429f840200000169">see post result</a>
</form>

Here's a plunker: http://plnkr.co/edit/5XYGH9hTe7cpchSFWbTK

Upvotes: 2

Views: 541

Answers (1)

Liviu T.
Liviu T.

Reputation: 23664

Angular doesn't do anything special when you have a form with an action defined. It's pure html form submission with exactly the fields that are defined.

Normally you would use:

<input type="hidden" ng-model="content.desc">

but angular currently (1.2.0rc1) still doesn't support ng-model binding to hidden inputs.

The workaround is this:

<input type="text" name="text" ng-model="content.text" ng-hide="true">

Upvotes: 3

Related Questions