I have a scenario as follows :
I have one searchbox and the user can enter two types of queries
Scenario One the Search Starts with i.e. A1234
Scenario Two the search Starts with i.e. B1234
Depending on one or two above I want to hit a different webservice.
Whats the best way to distinguish the search on the above input. Is it when the user clicks on my ng-submit I use a regular expression ?
Or should I have a scope variable on .watch() to find out as the user is typing ?
<form role="form" ng-submit="searchForm.$valid && searchCode()" name="searchForm" novalidate>
<div class="input-group">
<input type="text" class="form-control" ng-model="searchQuery" name="searchQuery" required autocomplete="off" spellcheck="false" focus>
<input type="submit" value="Search" class="btn btn-default btn-sarch-bar">
</div>
</form>
If the search is activated upon submit-button click, then you can handle the login in the submit function, and hit the proper webservice accordingly. something along these lines:
<form role="form" ng-submit="submit(searchForm.$valid, data)" name="searchForm" novalidate>
<div class="input-group">
<input type="text" class="form-control" ng-model="data.searchQuery" name="searchQuery" required autocomplete="off" spellcheck="false" focus>
<input type="submit" value="Search" class="btn btn-default btn-sarch-bar">
</div>
</form>
submit function:
$scope.submit = function(isValid, data) {
if(!isValid) return;
//check data.searchQuery and access the appropriate webservice here
}
If you're using angularjs 1.3, and you'd like to perform a search upon user interaction with the input, you might be interested in adding a directive to the input element, and use $asyncValidators
there's a great tutorial by yearofmoo regarding forms and validators using directives.
Related
I have a form with some angular validation, which I don't want to run at page load. Here is a stripped down example of my form:
<form ng-submit="vm.submit()" name="form" novalidate>
<input class="form-control" ng-model="vm.userName" required />
<button ng-disabled="form.$invalid && !form.vm.userName.$pristine" type="submit">Log In</button>
</form>
I'm attempting to turn off initial validation with !form.vm.userName.$pristine, as the user won't have touched the username text box yet. However, this isn't working and the form validates as usual on page load. Am I missing something?
You need to give input a name, so that ngFormController can register this element under and its validation rules. Then you would be able to check form.userName.$pristine:
<form ng-submit="vm.submit()" name="form" novalidate>
<input class="form-control" name="userName" ng-model="vm.userName" required />
<button ng-disabled="form.$invalid && !form.userName.$pristine" type="submit">Log In</button>
</form>
I'm working on a site where a user can submit several different kinds of forms. I would like to include the type of form submitted (basic, advanced, other). I've read that using hidden fields with AngularJS is possible, but not recommended. Rather than finding a hack to solve the problem, I'd prefer to do things right. What is the proper way to submit information that does not need to be displayed to the user but should be included with a submission?
Here's the HTML for the form:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name">
</div>
<label>Description</label>
<textarea name="description"></textarea>
<button ng-click="editProject.save()" class="btn btn-primary">Save</button>
<!--{{formselection}}-->
</form>
If you use ng-model the hidden fields are in the object memory context, only show the data to the user fill.
HTML:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name" ng-model="form.name">
</div>
<label>Description</label>
<textarea name="description" ng-model="form.description"></textarea>
<button ng-click="editProject.save(form)" class="btn btn-primary">Save</button> <!-- Pass the form to the method in controller-->
</form>
Controller:
$scope.form = {
hiddenField1: "anyValue",
hiddenField2: "anotherValue"
};
$scope.editProject = {save: function(form){
//http request given the form, this contain the name, description and the two hidden field
}}
http://plnkr.co/edit/fjnGc4Q4f8ZfwhupkOdR
The question is as simple as it is described in the "Title" :)
I just want to be able to put a break-point in the non-minified version of the AngularJS framework and see the logic that is executed when you try to submit a form that has an empty input with the "required" attribute. This logic should normally check if the input is not empty. The "this.$isEmpty = function(value) {...}" or "requiredDirective" are not hit when you click submit!
E.g. from AngularJS official site (https://docs.angularjs.org/guide/forms):
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required=""/>
<br/>
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
<input type="submit" ng-click="update(user)" value="Save"/>
</form>
I have custom html5 error message for input, which changes validation error text in chrome.
<input
oninvalid="setCustomValidity('It's custom message!')"
onchange="try{setCustomValidity('')}catch(e){}">
How can I do this with Angular directive?
Updated
Let's say, I want type <input custom-validity> instead of this.
You can learn all about doing form validation the Angular way in their documentation.
You don't need to create your own directives, because angular already has great form validation support built in.
Below is an example how to use the $dirty and $invalid attributes to show or hide validation messages. 'dirty' means that the form has been modified by the user.
<div ng-app="app">
<form name="myForm" novalidate>
<p>
<label>Name
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty">
Name required
</span>
</label>
</p>
<p>
<label>Email
<input type="email" name="email" ng-model="email">
<span ng-show="myForm.email.$invalid && myForm.email.$dirty">
Put a valid email
</span>
</label>
</p>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
You can also style the valid/invalid fields using a style rule like this:
form input.ng-invalid.ng-dirty { ... }
I want to implement some simple form validation in my AngularJS app, but I don't want it to show any validation errors until after the user has clicked the form submit button. I don't want it to validate as I type or even on exiting the field.
Is there a way to do this? I'll need to write at least one custom validator directive so it will need to work with that.
I am finding form validation in AngularJS to be very difficult so far, it's hard to get it to work exactly as you want.
You could do something like this. Here's an example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>