AngularJS data undefined after form submiting

Question

I have a simple form:

<form ng-cloak class="form-horizontal" name="regForm" ng-submit="submit()" novalidate>
<input type="text" class="form-control" id="pociFirstName" placeholder="First Name" name="pociFirstName" ng-model="poc.firstName" ng-required="true" ng-class="{red: regForm.pociFirstName.$invalid && (regForm.$submitted || regForm.pociFirstName.$touched)}" />
<input type="text" class="form-control" id="pociLastName" placeholder="Last Name" name="pociLastName" ng-model="poc.lastName" ng-required="true" ng-class="{red: regForm.pociLastName.$invalid && (regForm.$submitted || regForm.pociLastName.$touched)}" />
<input type="text" class="form-control" cc-number cc-eager-type cc-type="cardType" id="ccNum" placeholder="Card Number" name="ccNum" ng-model="card.number" ng-required="true" ng-class="{red: regForm.ccNum.$invalid && (regForm.$submitted || regForm.ccNum.$touched)}" ng-init="card.number=''"/>

....

<button class="btn btn-primary btn-payment" type="submit">Submit</button>   

</form>

then I have started part for the controller

$scope.regForm = {};
$scope.poc = {};
$scope.card = {};

$scope.submit = function () {

    console.log("Form submited");

    $scope.regForm = regForm;
    $scope.poc = regForm.poc;
    $scope.card = regForm.card;

    console.log("data: " + $scope.poc);
}

but after form submitting I'm not able to get data from the form - it came as undefinied.

Kind of simple thing to do but I have no idea where I have a mistake.

Hadi · Accepted Answer · 2017-09-01 19:33:54Z

2

It should be like this. you can access to ng-model value by $scope. so for access ng-model="poc.firstName" and ng-model="poc.lastName" just use $scope.poc and for access ng-model="card.number" use $scope.card.

$scope.submit = function () {
  console.log("Form submited");
  console.log("data: " + $scope.poc);
}

edited Sep 1, 2017 at 19:33

answered Sep 1, 2017 at 19:23

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

1 Comment

JackTheKnife Over a year ago

And this is it. Thanks!

Collectives™ on Stack Overflow

AngularJS data undefined after form submiting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related