2013-07-04 10 views
17

input type = "email"とng-model属性で何か特別なことはありますか? 入力が電子メールの場合、モデルは更新されません。 入力タイプをテキスト、番号または日付に変更すると、正しく更新されます。ng-modelと入力タイプの電子メールのバグはありますか?

私が理解していないバグや特別な魔法の電子メールの検証動作ですか?

+0

多分このhttp://www.youtube.com/watch?v=ZhfUv0spHCY&t=29m19sを意味しますか? –

+0

使用している角度のバージョン –

答えて

29

入力時にいくつかの検証が行われるため、モデルにバインドされる前に有効な電子メールアドレスを入力する必要があります。

はこれが使用されている正規表現です:

/^[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/ 

は、基本的には、入力に少なくとも[email protected]

3

補数であるアドレスを必要とする、あなたのプロパティを使用することができ、メールかどうかを確認するために形成このように、有効です。

HTML

<form name="myForm" ng-submit="submit()"> 
    <input type="email" ng-model="email1" name="email1" /> 
</form> 

Javascriptを:角1.3から始まっ

//[formName].[inputFieldName].property 
myForm.email1.$pristine; 
// Boolean. True if the user has not yet modified the form. 
myForm.email1.$dirty 
// Boolean. True if the user has already modified the form. 
myForm.email1.$valid 
// Boolean.True if the the form passes the validation. 
myForm.email1.$invalid 
// Boolean. True if the the form doesn't pass the validation. 
myForm.email1.$error 

Reference

2

は、あなたが簡単に[メール]バリデータを上書きして、それは常にtrueを返すことができます。

angular 
 
    .module('myApp', []) 
 
    .controller('MainController', function() { 
 
    this.email = ''; 
 
    }) 
 
    .directive('noEmailValidation', function() { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     link: function(scope, elm, attr, ctrl) { 
 
     ctrl.$validators['email'] = function() { 
 
      return true; 
 
     }; 
 
     } 
 
    } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <form ng-controller="MainController as main"> 
 
    <div>Email: {{main.email}}</div> 
 
    <input type="email" ng-model="main.email" no-email-validation> 
 
    </form> 
 
</div>

をお楽しみください。

11

これはバグではありません。電子メールの検証に正しいメールアドレス形式を入力すると更新されます。 無効な電子メール入力を許可するには、この属性をng-model-options="{'allowInvalid': true}"に追加します。

関連する問題