I must validate a field when I leave another field...
I let you see my code:
<input data-ng-model="invitation.Email" name="email" type="email" data-ng-required="true"
data-ng-model-options="{ updateOn: 'mousedown blur' }" />
<input data-ng-model="invitation.EmailConfirmation" name="email_confirmation" type="email"
data-ng-required="true" data-match="invitation.Email" data-ng-model-options="{ updateOn: 'mousedown blur' }" />
<span data-ng-show="presenta_amico_form.email_confirmation.$error.mismatch" class="error">Email mismatch</span>
So, for example... I write my Email, and that's Ok... then I write my ConfirmationEmail but the error "Email mismatch" appear because I see that I was wrong in typing the Email field. So I correct the Email field but the error does not disappear because I have to focus and blur the EmailConfirmation field.
I do not like this and I would like that the ConfirmationEmail is validated also when the Email field lose focus.
How can I do?
Thank you
You could add an ngBlur handler to the second field and manually apply the validation e.g.
<input data-ng-model="invitation.Email" name="email" type="email" data-ng-required="true"
data-ng-model-options="{ updateOn: 'mousedown blur' }" ng-blur="checkMatch()" />
Related
I want to validate a field where data may or maynot be auto populated in a required field .So I have basically two conditions to validate:
a. If no data is present, wait for touch, then display error ie. required,min,max errors.
b. If data is present, just display error, don't wait for touch.
My ng-if looks like:
ng-if="(!$ctrl.formName.address1.$length && $ctrl.formName.address1.$touched)
|| ($ctrl.formName.address1.$length)
|| $ctrl.formName.address1.$invalid"
address1 is my field name.
My Input box looks like below:
<input
id="address-form-address1"
class="form-control text-uppercase"
name="address1"
ng-disabled="$ctrl.disabled"
ng-maxlength="{{::$ctrl.INPUT_VALUES.guest.address.max}}"
ng-minlength="{{::$ctrl.INPUT_VALUES.guest.address.min}}"
ng-model="$ctrl.addressData.address1"
ng-model-options="{ updateOn: 'blur' }"
ng-pattern="$ctrl.REGEX.alphanumericSpecial"
ng-required="$ctrl.required"
type="text"
>
Please help .
To diagnose the problem, display the control:
<form name="$ctrl.formName">
<input
id="address-form-address1"
class="form-control text-uppercase"
name="address1"
ng-disabled="$ctrl.disabled"
ng-maxlength="{{::$ctrl.INPUT_VALUES.guest.address.max}}"
ng-minlength="{{::$ctrl.INPUT_VALUES.guest.address.min}}"
ng-model="$ctrl.addressData.address1"
ng-model-options="{ updateOn: 'blur' }"
ng-pattern="$ctrl.REGEX.alphanumericSpecial"
ng-required="$ctrl.required"
type="text"
>
</form>
{{ $ctrl.formName.address1 | json }}
This should quickly show what is happening and should help.
ng-invalid after selecting date from datepicker, but becomes valid if typed. Please help.
I worked around this by hiding the datepicker and showing an empty input text field when the value is null and then swapping/showing the datepicker when it is clicked.
<input
ng-if="my_date || set_my_date"
type="text"
id="my_date"
name="my_date"
datetime-picker="MM/dd/yyyy h:mma"
is-open="my_date"
ng-focus="set_my_date = true"
class="form-control"
ng-model="my_date"
placeholder="my date"
ng-readonly="true"
ng-required="true"
/>
<input
ng-if="!my_date && !set_my_date"
class="form-control"
placeholder="my date"
ng-click="set_my_date = true"
/>
ng-invalid class is added from angular when a required field is invalid (e.g empty), make sure the ng-model relative field , formvalue.workshopeDate, is correctly populated when you trigger the click.
I'm using the autofill-event polyfill for a form in Angular. For some of the fields, I've used ng-model-options within the input field. For those fields in Chrome, the model doesn't update, and fields fail validation when they should succeed. If I don't use ng-model-options everything works fine. Any thoughts on how to fix this in a way that allows me to still use ng-model-options?
Here's the code for the validation that gives a false negative:
<label class="control-label" for="city">City</label>
<input type="text" id="city" name="city" ng-model="contactForm.contact.city"
placeholder="City" class="form-control" ng-minlength="2"
ng-model-options="{ updateOn: 'blur' }" required>
<span ng-show="paymentForm.city.$error.required && !paymentForm.city.$untouched
|| paymentForm.city.$error.required
|| paymentForm.address.$error.minlength && !paymentForm.address.$untouched
|| paymentForm.address.$error.minlength" class="help-block">Enter your city</span>
I have defined an input feild as
<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^]))/">
</form>
And defined user in controller as
$scope.user{};
Now when I bind user.username value in HTML, its preventing it.
<p ng-if="user.username.length > 0">Display True</p>
Even if I simply bind its value in HTML as
{{user.username}}
Its not being displayed.
Now if I remove ng-pattern from input field as :-
<input type="text" ng-minlength="8" ng-maxlength="64" ng-model="user.username">
then only its binding and that too after satisfying ng-minlength="8" condition. Means '12345678' is displayed and '1234567' not.
One more issue is there i.e. if I use ng-pattern then ng-minlength validation is not working.
<p ng-if="signUpForm.username.$error.minlength">Please enter minimum length</p>
You can try setting the form.$setViewValue.length instead of the model's length
for example:
<p ng-if="signUpForm.username.$setViewValue.length > 0">Display True</p>
here's a solution i found:
How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?
I'm trying to get the form validation on -URL REMOVED- to trigger when I submit and it's not. I believe I have things setup correctly but am clearly missing something.
Looks like angularjs requires a model bound on an input to use the validation.
See http://jsfiddle.net/adamdbradley/Qdk5M/
Try removing ng-model="email", run, and you'll notice the validation no longer works.
<input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
vs
<input type="email" id="inputEmail" placeholder="Email" required>