伍模型輸入不具約束力返回undefined

Question

我使用的控制器語法。我試圖接受一個簡單的輸入，它在按鈕單擊時獲取一個值。

我的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> 

控制器

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

在頁面加載，我可以在輸入字段中看到的測試。但是當我點擊它來輸入我的價值時，它就變得沒有定義。所有控制檯語句顯示電子郵件未定義。

我最近才搬到控制器的語法，所以我試圖改變整個事情$範圍，而不是代替VM，它仍然給了我同樣的結果。這是爲什麼發生？有人可以解釋這個原因嗎？

Answer 1

我認爲這是由你使用type="email"引起的。

ng-model設計會過濾掉非有效的結果。

嘗試輸入一個有效的電子郵件地址或改變type="text"？