How do I use form names in Angular to get input data?

Question

In this tutorial by Jenkov, he asserts that you can give a form a name, and then access it in the controller by

$scope.FORM_NAME.INPUT_NAME

For example like

<form name="myFormNg" ng-submit="myForm.submitTheForm()" >
    <input name="firstName" type="text" ng-model="myForm.firstName">
  </form>

and then in Angular

$scope.myFormNg.firstName

However, when I try it, instead of getting what I typed into the input box (abc), I get this whole object:

{"$viewValue":"abc","$modelValue":"abc","$$rawModelValue":"abc","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":false,"$touched":true,"$pristine":false,"$dirty":true,"$valid":true,"$invalid":false,"$error":{},"$$success":{"parse":true,"required":true},"$name":"email","$options":null,"$$lastCommittedViewValue":"abc"}

Why? Is there a cleaner way to do it that Jenkov omits?

Why not just access it through scope with your "myForm.firstName" model property? — Chris
– Chris, Commented Dec 8, 2014 at 12:31
the object "myForm" contains your input ... try console.log($scope.myForm) in your controller — d-bro82
– d-bro82, Commented Dec 8, 2014 at 12:33
Jenkov is using the form name to check if a form field is valid. If you only need to get the values use $scope.myForm.firstName — Wayne Ellery
– Wayne Ellery, Commented Dec 8, 2014 at 12:38

raina77ow · Accepted Answer · 2014-12-08 12:47:30Z

1

Actually, Jenkov mentions (and quite clearly) one thing: with $scope.formName.inputName you'll get an instance of ngModelController (and only if this input is already bound - with ng-model or in some other way).

This instance has many uses; you can get back its view value (via $viewValue property; see this demo), check whether or not it passes validation etc. - but it's still an Object, not a string.

answered Dec 8, 2014 at 12:47

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

1 Comment

CodyBugstein Over a year ago

I missed that, sorry. Thank you!

Collectives™ on Stack Overflow

How do I use form names in Angular to get input data?

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