Question

I got a page with the list of emails and I have an input field there, which got 2 purposes: - Filter the list of the friends - If no friend with this email found - make Add Friend button available to send a friendship request

The problem is that I got a validation on this field and when I'm trying to make a search, system applies ng-pattern, so, if I got email aa@aa.aa on a list, filter will find it only with aa@aa.aa text, not with aa (as without ng-pattern).

I don't want to use 2 fields for this, so, are there any workarounds?

Code:

<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

Based on @JBNizet comment -

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

AngularJS - use input field as a fiter and as an input field at the same time

1 个答案: