在用户输入输入时让 AngularJs 更新 {{binding}} [电子邮件]

Question

Angular 仅在用户输入有效的电子邮件地址后从 input[email] 更新模型。如何在页面上的某处添加{{binding}}，该{{binding}} 将随着电子邮件值随着用户键入而更新——甚至在用户输入有效电子邮件地址之前？

这是我迄今为止尝试过的：

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email as you type: {{contact.email}} (doesn't work)<br/>
            Also doesn't work: {{$document.forms.MyForm.elements.email.value}}
        </form>
    </div>
</div>

控制器：

function MyCtrl($scope) {
    $scope.contact = {};
}

(fiddle)

姓名会按我的意愿实时更新，但电子邮件不会。

我想启用电子邮件验证。我只需要一些方法来绑定未经验证的input[email] 文本，因此它会随着用户键入而更新。

2014/7/8 更新

我想添加一个明确的要求，即type="email" 保持不变。我不想改变标记的语义来解决框架的限制。如果需要，我宁愿引入一个互补的依赖项（例如 jQuery）来填充所需的功能。

我不反对在控制器中处理验证——如 rageandqq 和 charlietfl 所建议的——如果它可以轻松完成的话。不过环顾四周，it looks like it could be tricky（根据我的要求）。

Answer 1

这就是 angularjs 的工作原理。如果您使用<input type="email" />，则在这种情况下输入有效之前，角度不会绑定您的输入，值必须是正确的电子邮件地址。

请在此处阅读更多信息：https://github.com/angular/angular.js/issues/1426

Answer 2

到目前为止，我想出的解决方法是使用 jQuery 来监听 input 的变化并更新 $scope 上的一个对象，我称之为 formRaw。有用。尽管如此，我还是希望有人能来告诉我一个更好的方法。

更新的例子：

<div ng-app>
    <div ng-controller="MyCtrl">
        <form name="MyForm" novalidate>
            Name: <input type="text" name="name" ng-model="contact.name" /><br/>
            Name as you type: {{contact.name}}<br/>
            Email: <input type="email" name="email" ng-model="contact.email" /><br/>
            Email Model: {{contact.email}}<br/>
            Email Form: {{formRaw.email}}
            {{q}}
        </form>
    </div>
</div>

和控制器：

function MyCtrl($scope) {
    $scope.contact = {};
    $scope.formRaw = {};

    $('input[type=email]').on('keyup change', function () {
        var input = $(this);
        $scope.formRaw[input.attr('name')] = input.val();
        $scope.$digest(); // FIXME: there's got to be a better way
    });
}

(fiddle)

Answer 3

电子邮件输入中的type="email" 属性是导致DOM 绑定混乱的原因。 将其更改为type="text" 可以让您的{{contact.email}} 正确显示。

Edited JSFiddle.