AngularJS - 入力フィールドをフィラーとして使用し、入力フィールドとして同時に使用する

Question

メールのリストを持つページがあり、そこには2つの目的がある入力フィールドがあります。 - 友人のリストをフィルタリングします - このメールの友人が見つからない場合 - フレンドボタンを使用して友だちリクエストを送信できるようにする

問題は、このフィールドで検証が行われていて、検索しようとしているときにシステムがng-パターンのため、aa@aa.aaがリストにある場合、フィルタにはaa@aa.aaというテキストのみが表示され、aaではなく、ngパターンのように表示されます。

私はこれに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> 

Answer 1

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