Question

Angular仅在用户输入有效的电子邮件地址后从input[email]更新模型。如何在页面上的某处添加{{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" /> angular将不会绑定您的输入，直到输入有效，在这种情况下，值必须是正确的电子邮件地址。

请在此处阅读更多内容：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.

当用户输入[email]时，让AngularJs更新{{binding}}

3 个答案: