Input field displaying as undefined in Angular

Question

I am trying to get the input value for a form field, but when I use the code below, the value displays as undefined.

Any idea what I'm doing wrong here?

.controller('ContactFormCtrl',
   function (Contacts) {
     var contactForm = this;
     contactForm.contacts = Contacts;
     contactForm.contact = {};
     var mail=contactForm.contact.email;

     contactForm.onchange = function () {console.log(mail);};
 });


<div class="col-sm-6 form-group">
   <label class="control-label" for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control" ng-change="contactForm.onchange()" ng-model-options="{ updateOn: 'blur' }" />
</div>

Amita Sharma · Accepted Answer · 2015-04-21 19:40:41Z

1

Update the controller as :

 .controller('ContactFormCtrl',
  function (Contacts) {
    var contactForm = this;
    contactForm.contacts = Contacts;
    contactForm.contact = {};
    contactForm.contact.email="";
    var mail=contactForm.contact.email;

    contactForm.onchange = function () {console.log(mail);};
 });

Currently, there is no email property with "contactForm.contact" object. So you need to initialize the email property and it will not give you undefined error.

edited Apr 21, 2015 at 19:40

answered Apr 21, 2015 at 19:26

Amita Sharma

214 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2015-04-21 20:19:53Z

0

As you are using controllerAs syntax then you should use alias there contactForm

<div ng-controller="ContactFormCtrl as contactForm">
 <div class="col-sm-6 form-group">
   <label class="control-label" for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control" ng-change="contactForm.onchange()" ng-model-options="{ updateOn: 'blur' }" />
 </div>
</div>

And the reason it is undefined is you have reinitialized controller contact object after contactForm.contacts = Contacts; which overrides the value of email.

Update

As discussed in chat you want to show email on blur as well as you want to call onchange function on email validate, for that you should have to use combination of directive ng-change with ng-blur then you should get rid off ng-model-options which don't suits your requirement.

Markup

<div ng-controller="ContactFormCtrl as contactForm">
    <form name="myForm">
        <div class="col-sm-6 form-group">
            <label class="control-label" for="email">Email</label>
            <input type="email" id="email" name="email" ng-model="contactForm.contact.email" class="form-control"
            ng-change="myForm.email.$valid && contactForm.onchange()" ng-blur="contactForm.onchange()"/>
        </div>
    </form>
</div>

edited Apr 21, 2015 at 20:19

answered Apr 21, 2015 at 19:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

9 Comments

Ken Over a year ago

Thank you. When I remove contactForm.contact = {}; I get the following error: Cannot read property 'email' of undefined

Pankaj Parkar Over a year ago

@Ken you should not removed that, you should keep it..could I know contacts and contact are different?

Ken Over a year ago

I don't have a good reason for using contact and contacts in my example above. Any suggestions on how to fix my code to resolve the undefined issue?

Pankaj Parkar Over a year ago

@ken I don't understand how can contactForm.contact.email will contain any value after initialization of contactForm.contact = {}

Pankaj Parkar Over a year ago

are you asking that after changing contactForm.contact.email value it should change in console.log?

|

Collectives™ on Stack Overflow

Input field displaying as undefined in Angular

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related