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.
Related
I have the following input:
<input id="firstname" class="form-control"
name="firstname" ng-model="event.firstname" autocomplete="off"
required validation-event-firstname ng-model-options="{ updateOn: 'default blur', debounce: { default: 300, blur: 0 } }">
validation-event-firstname is a custom async validator which call a rester server. I need the field to be required.
Here is the code to display the errors:
<ng-messages for="form.firstname.$error" role="alert" ng-show="(form.firstname.$dirty || form.firstname.$touched) && form.firstname.$invalid">
<ng-message when="required" class="error-message">required</ng-message>
<ng-message when="my-custom-validation" class="error-message">my custom validation</ng-message>
</ng-messages>
The problem is: when I refresh the page and put some content in the field, the error message "required" is shown something like 0.1s. This behaviour does not depend on the content of the field: if I put an invalid server value (triggered by my-custom-validation) or not, I can see the error message (and it disappears after 0.1s).
When I remove the directive validation-event-firstname, there is no problem. I think this issue does not depend on the code of the async validator, because I tried with my business code and with a simple $timeout, the effect is still the same.
Thanks in advance for you help.
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 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()" />
How can I make a form input to become dirty as the form is submitted?
This is needed so that the input fields with an $error can be
Example:
name: <input type="text"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur' }"
name="uName"
required /><br/>
As the form is submitted, I want this field - if left blank - to be rendered using the "invalid & dirty" style:
.css-form input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
Disable the submission button until form is dirty and the form items are valid.
<button type="submit" class="btn btn-primary" ng-disabled="myFrmName.$invalid || !myFrmName.$dirty">Submit Form</button>
Using ng-disabled will disable the form submission button while the form is $invalid or the form has yet to be touched (not $dirty).
EDIT
I usually do something like this to display an error next to the required field:
<input type="text" name="myField" required ng-class="{true : 'has-error'}[hasError(myFrmName.myField.$error.required,myFrmName.myField.$dirty)]>
<span ng-if="hasError(myFrmName.myField.$error.required,myFrmName.myField.$dirty)">Required!</span>
Then in your controller:
$scope.hasError = function(e,d){ // e = $error, d = $dirty
if(angular.isDefined(e))
return e && d;
return false;
} // end hasError
Example with ngMessages (Angular 1.3)
<input type="text" name="myField ng-model="fields.myField" ng-class="{true : 'has-error'}[hasError(myFrmName.myField.$error.required,myFrmName.myField.$dirty)] required>
<ng-messages for="myFrmName.myField.$error" ng-if="myFrmName.myField.$dirty">
<ng-message when="required" class="text-danger">The field is required!</ng-message>
</ng-messages>
The great thing about ngMessages is that all you need to do is add more <ng-message> tags for each type of validation for the field and just change the when attribute approrpriately.
<ng-message when="minlength">Your entry is too short.</ng-message>
Angular will display the correct message based upon whether or not the when is in the $error object for the field.
You can use $submitted flag of the form to highlight the field if the form is submitted and is empty.
<input type="text"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur' }"
name="uName"
ng-class={'has-error': yourFormName.$submitted && !yourFormName.uName.$valid}
required />
Or I guess just setting the form's dirty flag to true in your controller might do the same work. But I believe this implicitly changes the DOM as it adds a class to form which is not a good practice in angular.
$scope.yourForm.$dirty = true;
in case you would like to do that programatically, there is a method named "$setDirty()" you could use for that purpose.
https://docs.angularjs.org/api/ng/type/form.FormController
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