Have AngularJs update {{binding}} as the user types in input[email]

Question

Angular only updates the model from an input[email] after the user has entered a valid email address. How can I add a {{binding}} somewhere on the page that will update with the email value as the user types -- even before the user has typed in a valid email address?

Here's what I've tried so far:

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

Controller:

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

(fiddle)

The name updates in real-time like I want, but the email doesn't.

I'd like to leave the email validation enabled. I just need some way to bind the un-validated input[email] text, so it updates as the user types.

Update 2014/7/8

I'd like to add an explicit requirement that the type="email" remains unchanged. I do not want to change the semantics of the markup to workaround a limitation of the framework. If need be, I'd rather pull in a complementary dependency (such as jQuery) to shim in the needed functionality.

I'm not opposed to handling validation in the controller — as suggested by rageandqq and charlietfl — if it could be done easily. Looking around though, it looks like it could be tricky (given my requirements).

sylwester · Accepted Answer · 2014-07-07 20:50:48Z

1

That is how angularjs works. If you use <input type="email" /> angular is not going to bind your input till input will be valid in this case value must be a proper e-mail address.

please read more here : https://github.com/angular/angular.js/issues/1426

answered Jul 7, 2014 at 20:50

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Kropat Over a year ago

Even if it's not the way angularjs "works", surely there's some workaround to achieve the effect I'm asking for. Instead of binding to the model, can I bind to an expression that resolves to the DOM value?

sylwester Over a year ago

of course yes use rageandqq solution type="text" instead of "email"

charlietfl Over a year ago

@MichaelKropat look in angular source and you can borrow their validation regex to put in your validation method

Michael Kropat Over a year ago

@charlietfl thanks for the suggestion. I updated the question with why that might be tricky for my case.

Michael Kropat · Accepted Answer · 2014-07-07 21:46:15Z

The workaround I've come up with so far is to use jQuery to listen for the input change and update an object on $scope that I've called formRaw. It works. Still, I'm hoping someone will come along and show me a better way.

The updated example:

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

And controller:

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)

rageandqq · Accepted Answer · 2014-07-07 20:43:53Z

0

The type="email" attribute on your E-mail input is what is causing the DOM binding to mess up. Changing it to type="text" works allows your {{contact.email}} to display correctly.

Edited JSFiddle.

answered Jul 7, 2014 at 20:43

rageandqq

2,30920 silver badges24 bronze badges

2 Comments

Michael Kropat Over a year ago

I'd like the keep the email validation in place, so this is not an option, unfortunately.

rageandqq Over a year ago

Unfortunately, that is the way AngularJS is built. I would recommend simply placing e-mail validation logic in your controller.

Collectives™ on Stack Overflow

Have AngularJs update {{binding}} as the user types in input[email]

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related