CODEWITHSUNDEEP
angularjs
JackTheKnife
JackTheKnife

Reputation: 4154

AngularJS data undefined after form submiting

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.

Upvotes: 0

Views: 42

Answers (1)

Hadi
Hadi

Reputation: 17299

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);
}

Upvotes: 2

Related Questions