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
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.
I have a search field and i want that the binding of search textbox reflected after some time.Thanks in advance.
Here is my code
<div ng-controller="appointment as vm">
Search By Description : <input class="form-control" placeholder="search by description" type="text" ng-model="vm.filterText" />
{{vm.filterText}} </div>
You could use ng-model-options on your input field
<input type="text" ng-model="vm.filterText" ng-model-options="{debounce: { 'default': 10000}"/>
the ng-model-options directive will surely help you. You can update the binding after specified time or on blur event.
try this code
Search By Description : <input class="form-control" placeholder="search by description" type="text" ng-model="vm.filterText" ng-model-options={ debounce: 1000 } />
See example of ng-model-options http://learnit.visrosoftware.com/try/kfPWlU4N
Try using $interval in your directive. If you can share your directive as well, that will 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 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?
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