Có lỗi email kiểu ng và kiểu đầu vào không?

Question

Có điều gì đặc biệt xảy ra với kiểu nhập = "email" và thuộc tính ng-model không? Nếu đầu vào là email, thì mô hình sẽ không cập nhật. Nếu tôi thay đổi loại đầu vào thành văn bản, số hoặc ngày cập nhật chính xác.

Lỗi hoặc một số hành vi xác thực email ma thuật đặc biệt mà tôi không hiểu?

Answer 1

Thực hiện một số xác thực khi nhập, vì vậy bạn cần phải nhập một địa chỉ email hợp lệ trước khi nó bị ràng buộc vào mô hình.

Đây là regex được sử dụng:

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

Về cơ bản bạn cần phải nhập vào một địa chỉ đó là ít nhất a@b.co

Answer 2

Một bổ sung, bạn có thể sử dụng tài sản trên bạn tạo để xem email của bạn có giá trị, như thế này:

HTML:

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

Javascript:

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

Answer 3

Bắt đầu từ góc 1.3, bạn có thể dễ dàng ghi đè lên 'email' validator và làm cho nó luôn trở thành sự thật.

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>

Thưởng thức.

Answer 4

Đó không phải là lỗi, nó chỉ cập nhật khi chúng tôi nhập định dạng địa chỉ email chính xác để xác thực email. Thêm thuộc tính này ng-model-options="{'allowInvalid': true}" để cho phép nhập email không hợp lệ.