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>
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 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))
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 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 { ... }