For instance, if I have a search function that searches through hashtags (#), and people (@), what is the best way to deal with the case when people actually type in that character i.e:
SEARCH: @sally or
SEARCH: #trendyTag
instead of:
SEARCH: sally or SEARCH: trendyTag
The particular label and input tags I'm using have a placeholder as well of course, but I don't want to count on users reading or paying attention to that. As it stands now, if they type in a symbol their results don't get returned, so I implemented a cheap hack that just accepts the particular symbol for each different category but I'm hoping there's a better way to do this in angular.
I made an example form in Plunker based on an earlier SO answer.
The sample uses Angular's built-in form validation features, especially the pattern attribute to validate a text input by a regular expression match. You might want to revise the regular expression to better match your scenario.
<form name="searchForm">
<div>
<label for="editSearchTerms" class="control-label">Search</label>
<input
type="text"
id="editSearchTerms"
name="searchTerms"
placeholder="hashtag or people"
ng-model="terms"
pattern="^[a-zA-Z0-9]*$"
required
/>
<button ng-click="search(terms)" ng-disabled="searchForm.$invalid">Go</button>
</div>
<p class="invalid" ng-show="searchForm.$invalid && !searchForm.$pristine">
The characters '@' and '#' are not allowed.
</p>