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>
Related
I have a form with some angular validation:
<form ng-submit="vm.submit()" name="form" novalidate>
<input class="form-control" name="userName" ng-model="vm.userName" required />
<input class="form-control" name="pwd" ng-model="vm.pwd" required type="password" />
<button ng-disabled="form.$invalid" type="submit">Log In</button>
</form>
The problem I am having is that on page load, form.$invalid is registering as true if the username and password are auto completed by the browser. So, the page is loading with the form essentially filled out, but the Log In button is disabled. Any suggestions?
If you autocomplete value for its correct, then you may tray force run $digest cycle. Of course it's not clean solution))
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.
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>
I have simple form:
<form class="form-horizontal" name="loginForm" novalidate ng-click="login()" >
and inputs inside with "required":
<input required class="input-xlarge" ng-model="uEmail" placeholder="Email" type="email">
When user load the form always show error on startup.
How to start validation after user interaction?
you can simply use
<span ng-if="form.inputNmae.$touched && form.inputNmae.$error.required">Required input</span>