breaks the ng model data binding in the modal dialog My application is using a modal dialog with a simple input element ...">
Clever Geek Handbook

<input type = "email"> breaks the ng model data binding in the modal dialog

My application is using a modal dialog with a simple input element

<input id="fieldEmail" class="form-control" type="text" ng-model="email" required="" />
email: {{ email }}

While the modality is showing, I can enter something in the input field and see how it is reflected in the text next to it, as expected. But if I change the input type to type = "email" it breaks the data binding. Login is no longer reflected.

Has anyone else encountered this problem?

+3


source to share


2 answers


it will only show if the input field has a valid email.so put a valid email in the input field and check if it works or not. This is because when type="email"

ng-model

it only accepts a valid email value, otherwise it will undefined

.



+8


source


This is because of the "email" type. Even if we use type = 'number' then 'ng-model' will be undefined as well, unless you enter some valid number in the text field. For all HTML5 input types, we have to provide valid inputs to assign a value to the ng model. And even when we use regular expressions for text fields, the ng model will be undefined until we supply a value that matches the regular expression.

' http://plnkr.co/edit/G2RlzO4q1zKEPP0T8xvF?p=preview `



<body>
<h1>Hello Plunker!</h1>
Enter 3 to 12 characters only.
<br/>
<input type="text" ng-model="name" ng-pattern="/^[a-z]{3,12}$/"/>
<br/>
{{name}}

+3


source






More articles:


All Articles