Getting form input/data in angular-ui bootstrap

Question

I'm trying to get the input values for a form I'm submitting and the data angular-ui is binding to the form is not what I expected. An example form:

<form name="myform" method="post" data-ng-submit="submit()">
    <input type="text" name="myform.firstname" />
    <input type="submit" value="submit" />
</form>

and in submit() I am just doing console.log($scope.myform)

I was expecting: { firstname: "sample" } but I am instead getting:

{ $error: Object, $$success: Object, $pending: undefined, $name: "myform", $dirty: false, $pristine: true, $valid: true, $invalid: false, $submitted: true, $$parentForm: Object, 10 more… }

The input key and its value don't seem to be in here and even if I use a model, angular-ui is overriding the object on submit.

Answer 1

Notice name and ng-model attributes on input field. ng-model is important to do the data binding between angular scope and html elements.

<form name="myform" method="post" data-ng-submit="submit()">
    <input type="text" name="firstname" ng-model="myform.firstname" />
    <input type="submit" value="submit" />
</form>