2017-04-06 190 views
1

我收到了一个包含电子邮件列表的页面,并且在那里有一个输入字段,其中有两个用途: - 筛选朋友列表 - 如果与此电子邮件没有发现朋友 - 使可添加好友按钮发送好友请求AngularJS - 同时使用输入字段作为输入字段和输入字段

的问题是,我得到了这个领域的验证,当我试图进行搜索,系统采用NG-模式,所以,如果我在电子邮件列表上找到了电子邮件[email protected],则过滤器将只能用[email protected]文本找到它,而不是aa(因为没有ng-pattern)。

我不想为此使用2个字段,那么是否有任何解决方法?

代码:

<td> 
    <input type="text" id="email" name="email" ng-model="searchForFriend" 
    ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" 
    ng-minlength="3" ng-maxlength="100" required placeholder="Your friend e-mail" 
    ng-blur="focused1 = false" ng-focus="focused1 = true" /> 
    <span ng-show="focused1 && !friendsForm.email.$valid"><error><br>E-mail is incorrect</error></span> 
    <span ng-show="focused1 && friendsForm.email.$error.maxlength"><error><br>E-mail is too long</error></span> 
    <input type="button" id="sendRequest" value="Send Request" ng-click="saveContact()" ng-disabled="!friendsForm.$valid && !friendsForm.contactsAmount.length" class="btn btn-primary"/> 
</td> 
..... 
<tr ng-repeat="contact in friends|filter:searchForFriend|filter:{id_dictionary:'2'} as contactsAmount"> 
    <td align="left">{{ contact.email }}</td> 
</tr> 
+0

删除NG模式,但禁用添加按钮,如果输入的文字不与你的正则表达式匹配。 –

+0

或者使用'ng-model-options =“{allowInvalid:true}”' –

+0

ng-model-options =“{allowInvalid:true}”完全合适,谢谢! –

回答

0
基于@JBNizet评论

-

<input type="text" id="email" name="email" ng-model="searchForFriend" 
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" 
ng-minlength="3" ng-maxlength="100" required placeholder="Your friend e-mail" 
ng-blur="focused1 = false" ng-focus="focused1 = true" 
ng-model-options="{allowInvalid: true}"/> 
<span ng-show="focused1 && !friendsForm.email.$valid"><error><br>E-mail is incorrect</error></span> 
<span ng-show="focused1 && friendsForm.email.$error.maxlength"><error><br>E-mail is too long</error></span> 
<input type="text" placeholder="Search for Friend" ng-model="searchForFriend" style = "width:99%;">