Ng-Modell zur Eingabe nicht bindend undefiniert

Question

Ich verwende Controller als Syntax. Ich versuche eine einfache Eingabe, die einen Wert annimmt, auf Knopfdruck zu akzeptieren.

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

Auf Seite Last, kann ich Test in das Eingabefeld ein. Aber sobald ich darauf klicke, um meinen Wert einzugeben, wird er undefiniert. Alle Konsolenanweisungen zeigen an, dass die E-Mail nicht definiert ist.

Ich bin erst vor kurzem als Syntax in den Controller verschoben, also habe ich versucht, das ganze Ding auf $ scope anstatt auf vm zu ändern, und es gab mir immer noch das gleiche Ergebnis. Warum passiert dies? Könnte jemand bitte die Ursache dafür erklären?

Answer 1

Ich denke, es wird durch Sie mit type="email" verursacht.

ng-model von Entwurf wird ungültige Ergebnisse ausfiltern.

Versuchen Sie, eine gültige E-Mail-Adresse einzugeben oder zu type="text" zu wechseln?