CODEWITHSUNDEEP
javascriptangularjs
kvnam
kvnam

Reputation: 1455

Ng-model to input not binding returns undefined

I am using Controller as Syntax. I am trying to accept a simple input, which takes a value, on button click.

My HTML:

<section class="row" ng-controller="EditController as vm">
 <div class="col-md-12">
   <md-input-container class="md-block">
      <label for="email">Add Email</label>
      <input id="mEml" type="email" name="e0" class="form-control" ng-model="vm.myVal.email" lowercase required>
   </md-input-container>
  </div>
  <div class="col-md-12">Email entered : 
   <!-- Only for testing -->
   <span ng-bind="vm.myVal.email"></span>
  </div>
  <div class="col-md-12 col-xs-12 text-right form-group no-pads">
   <button type="button" ng-click="vm.updateIt()">Save</button>
  </div>
</section>

Controller

 function EditController($scope, $http, $location, $sanitize){    
  var vm = this;
  vm.updateIt = updateIt;
  vm.myVal= {email: 'test'};
  function updateIt(){
   console.log('Email entered is ' +  vm.myVal.email);
   console.dir( vm.myVal);
  }
 }());

On page load, I can see test in the input field. But the moment I click on it to input my value, it becomes undefined. All console statements show email to be undefined.

I have only recently moved to Controller as Syntax, so I tried changing the whole thing to $scope instead of vm instead, and it still gave me the same result. Why is this happening? Could someone please explain the cause of this?

Upvotes: 0

Views: 1271

Answers (1)

Icycool
Icycool

Reputation: 7179

I think it is caused by you using type="email".

ng-model by design will filter out non-valid results.

Try input a valid email address or change to type="text"?

Upvotes: 2

Related Questions