javascript - 输入未绑定(bind)的 Ng-model 返回未定义

Question

我使用 Controller 作为语法。我试图在单击按钮时接受一个简单的输入，该输入需要一个值。

我的 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);
  }
 }());

在页面加载时，我可以在输入字段中看到测试。但是当我点击它输入我的值时，它就变得不确定了。所有控制台语句都显示电子邮件未定义。

我最近才将 Controller 作为语法，所以我尝试将整个内容更改为 $scope 而不是 vm，但它仍然给了我相同的结果。为什么会发生这种情况？有人可以解释一下这是什么原因吗？

Answer 1

我认为这是由您使用type="email"引起的。

ng-model 按设计会过滤掉无效结果。

尝试输入有效的电子邮件地址或更改为 type="text"？