Form inputs not binding with Angular variables

Question

I am trying to automate the sending of a form via Angular and bind the input values with variables in my controller. For some reason however, these values are not being recognised.

<ion-view cache-view="false" ng-controller="CashierController as cashCtrl" class="background">
  <ion-nav-title></ion-nav-title>

  <ion-content padding="true">

    <form id="cashier" name="cashCtrl.cashierForm" method="POST" action="https://url.action" target="screen">
      <input type='hidden' id='token' name='token' ng-model="cashCtrl.token" />
      <input type='hidden' id='merchantId' name='merchantId' ng-model="cashCtrl.merchantId" />
      <input type='hidden' id='customerId' name='customerId' ng-model="cashCtrl.customerId" />
      <input type='hidden' id='action' name='action' ng-model="cashCtrl.action" />
      <input type='hidden' id='paysolName' name='paysolName' ng-model="cashCtrl.paysolName" />
    </form>

    <iframe name="screen" height=600 width=320>
    </iframe>

  </ion-content>
</ion-view>

Now, on the controller I am specifying them as follows:

var app = angular.module('app');

app.controller('CashierController', function($scope, $state, $window, $localStorage, GatewayService) {

  var self = this;

  this.cashierUrl = "https://url.action";
  this.token = $localStorage.cashierToken;
  this.merchantId = '//';
  this.customerId = $localStorage.customerId;
  this.action = '//';
  this.paysolName = 'CreditDebitCards';

  console.log(this.cashierForm);

  document.getElementById('cashier').submit();

  this.goToPage = function(page) {
    $state.go(page);
  }

})

Worth noting is that if I specify the variables using curly bracket notation like so: {{cashCtrl.token}} BUT not on the form, the binded values do show. Furthermore, the line console.log(this.cashierForm); returns undefined.

What am I doing wrong?

I think this link answers the question http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value — Anirudh Mangalvedhekar, Nov 22 '16 at 19:48
You could do something like [this](http://stackoverflow.com/a/18446730/2435473) — Pankaj Parkar, Nov 22 '16 at 19:48
`var self = this;` After doing this why are you using `this` again? Not related to the question, but just a suggestion — Pritam Banerjee, Nov 22 '16 at 19:50
@PritamBanerjee I was actually using `self` but I had tried to test it with `this` instead crazily hoping that it might possibly be the reason. — mesllo, Nov 22 '16 at 19:56
If I add a submit button and click it to post, then it works and data is binding. However it just won't work if I try to programmatically submit the form using `document.getElementById('cashier').submit()` Am I missing something? — mesllo, Nov 22 '16 at 21:17
if you want to mock an event then you might probably need .triggerHandler() — Anirudh Mangalvedhekar, Nov 22 '16 at 21:36

Form inputs not binding with Angular variables

0 Answers0