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>
Related
The date picker plugin is still working even if the field is readonly.
<input name="SpecialFields_{{::field.FieldID}}" ng-model="newUserObj.specialfields[field.FieldID]" type="text" class="DatePickerClass form-control" uib-datepicker-popup="{{format}}" datepicker-localdate is-open="popup.customDate[$index].opened" autocomplete="off" placeholder="e.g. 01-January-2000" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" ng-required="field.RequiredField == 1" ng-readonly="field.AdminEditable && (isAdmin == 0)">
Is there any way to disable the datepicker
I think you might want to use ng-disabled="field.AdminEditable && (isAdmin == 0) instead of ng-readonly.
This will prevent changes.
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.
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 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()" />
I have a pattern on my controller
$scope.pattern = {
name: /[a-zA-Z]{5,}/
}
On the view
<input type="text" name="name" data-ng-model="name" ng-model-options="{ updateOn: 'blur' }" ng-pattern="pattern.name" required />
<div ng-show="contactForm.name.$dirty && contactForm.name.$invalid">
<span ng-show="contactForm.name.$error.required">The name field is mandatory</span>
<span ng-show="contactForm.name.$error.pattern">The name must be at least 5 characters long</span>
</div>
I want the field to be validate only when it looses the focus but it doesn't it validates every time I press a button.
ngModelOptions was introduced only in Angular 1.3.x
https://docs.angularjs.org/api/ng/directive/ngModelOptions
If you want to use similar functionality in Angular 1.2.x, check out this poly fill:
https://github.com/fergaldoyle/modelOptions