AngularJS - 同時使用輸入字段作爲輸入字段和輸入字段

我收到了一個包含電子郵件列表的頁面，並且在那裏有一個輸入字段，其中有兩個用途： - 篩選朋友列表 - 如果與此電子郵件沒有發現朋友 - 使可添加好友按鈕發送好友請求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>

來源

2017-04-06 Aleksey Kiselev

刪除NG模式，但禁用添加按鈕，如果輸入的文字不與你的正則表達式匹配。 –

或者使用'ng-model-options =「{allowInvalid：true}」' –

ng-model-options =「{allowInvalid：true}」完全合適，謝謝！ –

基於@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%;">

來源

2017-04-06 17:21:46

AngularJS - 同時使用輸入字段作爲輸入字段和輸入字段

回答

相關問題