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))
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>
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>
<form name="Form" class="form" data-ng-enter="saveInfo()" novalidate>
<div class="question-group">
<label class="question" for="FirstName">
Your first name*
<input id="FirstName" type="text" data-ng-model="app.FirstName" maxlength="40" required />
</label>
<label class="question" for="LastName">
Last name*
<input id="LastName" type="text" data-ng-model="app.LastName" maxlength="80" required />
</label>
</div>
<div style="margin: 0 auto; width: 155px;" class="button-center">
<button class="btn btn-success btn-lg" data-ng-click="saveInfo()" data-ng-disabled="Form.$invalid">
Save
</button>
</div>
I am disabling the save button if the form fails client side validations but when I hit enter in the input field it bypasses the client side validations and submits the form. I don't want that to happen. I want to submit the application when I hit enter if and only if it passes all the client side validations.
Is there any way to check if the button is disabled then data-ng-enter shouldn't work something like that?
You should use data-ng-submit instead of data-ng-enter
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 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>