I have this little piece of code in my html page
<div class="input-group">
<input type="text" class="form-control" name="telefono" id="field_telefono" ng-model="vm.indirizzo.telefono" telefono required/>
<span class="input-group-addon" role="button" uib-popover="{{'theFoodApp.indirizzo.informativa' | translate}}" data-popover-title="{{'theFoodApp.indirizzo.informativa-title' | translate}}" data-popover-placement="top" data-popover-append-to-body="true">
<span class="glyphicon glyphicon-question-sign white"></span>
</span>
</div>
Is possibile open the uib-popover when I focus on the input text?
popover-trigger="'focus'"
You could also use ng-focus and ng-blur directives to trigger a toggle variable that is passed to popover-is-open="".
Related
I have a textbox in AngularJs form. Currently I am using ng-change to open a modal pop-up. However, I would like to open the pop-up, when the focus hits the textbox. Below is the current code:
<div class="form-group col-lg-6">
<div class="input-group col-md-6">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" required="" placeholder="Search the group" ng-model="searchDatalocation" ng-change="searchUsers()" name="searchValue">
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.searchValue.$error.required">Data is required</span>
How to open pop-up on focus? Is there any other event which can be used other than ng-change?
Thanks
try ng-focus="searchUsers()" instead of ng-change="searchUsers()"
<div class="col-xs-7">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="settings.input">
checked
</label>
</div>
<div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''">
<input type="number" class="form-control input-sm" id="inputEmail3" name="input" ng-model="settings.input" placeholder="if checked, then do validation" required min="0">
<span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>
</div>
demo here
My question is when I set required for the input, the form.$valid will be false, But what I want is only when the checkbox checked, then do input validation, So when not checked, even the input is empty, the value of form.$valid should be true
What I purpose is to override the $valid of input, how to override?
Form field is getting invalid because you had required attribute over input field, so every time that form input field is considered as required. So what you can do is, you should add required attribute on form field conditionally by having ng-required directive on input with expression.
Markup
<div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''">
<input type="number" class="form-control input-sm" id="inputEmail3" name="input"
ng-model="settings.input" placeholder="if checked, then do validation"
ng-required="settings.input" min="0"/>
<span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span>
</div>
Forked Plunkr
Angular has ng-required directive that allows to enable required attribute with an expression. Replace required="" on input with the following:
ng-required="settings.checked"
Live example
I've a form with input controls which I need validate, but the angularjs validation doesn't work as I expected, something I'm doing wrong
This is a control of my form, between tags
<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
<label class="control-label" for="qty">Cantidad</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
<input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"/>
</div>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>
If I assign ng-class = "'has-error'" directly it works as expected, but when I put conditions like this:
ng-class="{'has-error':addServiceForm.description.$invalid && addServiceForm.description.$dirty}"
Nothing occurs, it doesn't works as I need.
I'm begginer using angularjs and bootstrap, please be patient with me =(
The problem with your code is that there is no condition set on your input such as ng-minlength to tell Angular when .$valid or .$invalid should return true. So Angular just defaults to ng-minlength="1" and the error is never displayed inless you delete all letters.
You should also look into the $submitted method, it is very nice for form validation.
<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
<label class="control-label" for="qty">dirty: {{addServiceForm.qty.$dirty}} invalid: {{addServiceForm.qty.$invalid}}</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
<input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"
ng-minlength="4"/>
</div>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
Another Div
</span>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>
finally I could resolve the problem, for a unknown reason the form could not be positioned immediately after the div with the controller inside. I just moved the code at last part of my html before the closing div, and with this move my form works exactly as I need.
Thanks for all your comments and recommendations.
If someone knows why this is necessary, I hope you share.
Regards
I want to add class to span element using angular
<div class="input-group textbox-wrap fade-in two">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}"
required="required" data-ng-model="username" ng-focus="focusInput($event)" ng-blur="blurInput($event)" autofocus />
</div>
I am able to adding the class to parent div but i need to apply class for span element.
In the controller,
$scope.focusInput= function($event )
{
angular.element($event.target).parent().addClass('focused');
};
You could do it on HTML itself.
<div class="input-group textbox-wrap fade-in two">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}"
required="required" ng-class="'focused':focused"
data-ng-model="username" ng-focus="focused=true" ng-blur="focused=false" autofocus />
</div>
You could use ngClass directive on the span element, based on a variable you set on the focus input function.
You can do this:
<div class="input-group textbox-wrap fade-in two">
<span class="input-group-addon" ng-class="{'yourClass': inputFocused}"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}"
required="required" data-ng-model="username" ng-focus="focusInput()" ng-blur="blurInput($event)" autofocus />
</div>
$scope.focusInput= function($event )
{
$scope.inputFocused = true;
};
HTML
<input type="text" ng-model="email" ng-disabled="button" rquired>
<a class="btn" ng-model="button">edit</a>
So basically I want to enable the input field when the button is clicked. I could do this with some javascript but I want to figure out an easy way for this.
The above example does not work. Any ideas why?
You can use ng-click to change the value of button:
<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>