バインディングを入力しないNgモデルは返されません。

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

、私は、入力フィールドでテストを見ることができます。しかし、私が値を入力するためにそれをクリックする瞬間、それは未定義になります。すべてのコンソールステートメントは、電子メールが未定義であることを示しています。

私は最近ControllerとしてSyntaxに移ったので、代わりにVM全体で$ scopeに変更しようとしましたが、それでも同じ結果が得られました。なぜこうなった？誰かがこれの原因を説明できますか？

Answer 1

type="email"を使用していると思われます。

ng-modelによって、有効でない結果が除外されます。

有効なメールアドレスを入力するか、type="text"に変更してください。