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()"
Related
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="".
I am using Angular Js. I have a checkbox named "Include Image", which is checked by default. I have a file upload control, using which users can upload custom images. I am trying to hide and show the file upload control based on the checkbox. If the checkbox is unchecked, I want to hide the file upload control. I have tried the below code, but on page load, when the checkbox is checked, the file upload is not showing. If I uncheck and check the checkbox, the file upload is hiding and showing. How to make the file upload visible in the load. Below is the code used:
<div class="row">
<div class="col-sm-2">
<label class="control-label">Seasons:</label><em style="color:red">*</em>
</div>
<div class="col-sm-4 form-group" >
<select name="seasonTypeSelect" required="" ng-model="selectedSeasonsType" class="dropdown form-control cl-sm-6" ng-options="season.SeasonTypeName for season in seasons" ng-change="updateImageUrl(selectedseasonsType)">
<option value="">-- Select the Season --</option>
</select>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.seasonTypeSelect.$error.required">Seasons is required</span>
</div>
<div class="row">
<div class="form-group col-md-8" style="padding-left: 0px !important;">
<label class="control-label col-sm-3">
<input type="checkbox" ng-model="includeImage" ng-checked="true" ng-change="isImageInclude(includeImage)">
Include Image
</label>
<img ng-src="{{testTypeImage_url}}" style="padding-left: 20px !important;height:40px" id="imgHolder" alt="Image will display here." class="imagerowStyle" />
<br />
</div>
<div class="form-group col-md-4 col-centered">
<input type="file" class="form-control" id="imageUploadfile" name="Imagefile" accept="image/*" />
<input type="button" name="imageUploadButton" ng-click="uploadFiles()" value="Upload" />
</div>
</div>
The file upload control should only show if the dropdown does not have value "-- Select the Season --" and checkbox is checked. How to achieve this?
Thanks
Just try including (req'd) model properties on your fileUpload control inside ng-show to conditionally show/hide
Html:
<input type="file" ng-show="selectedSeasonsType && includeImage" />
I am beginner in AngularJS. So I faced little bit confusion this language. Please check my code:
<form class="form-horizontal" ng-submit="productFormForm.$valid && submitProductForm()" novalidate="" name="productFormForm">
<label for="from_id_dropdown">Templates</label>
<select class="form-control" name="from_id_dropdown" id="from_id_dropdown" ng-model="formData.form_id" ng-change="getDropdownOptions(formData.form_id)" ng-options="option.id as option.name for option in forms_dropdown.availableOptions" required="">
<option value="">Select Template</option>
</select>
<div ng-show="productFormForm.$submitted || productFormForm.from_id_dropdown.$touched" class="">
<span style="color:red;" ng-show="productFormForm.from_id_dropdown.$error.required">Template is required.</span>
</div>
</form>
<form class="form-horizontal" ng-submit="attributeForm.$valid && submitForm()" novalidate="" name="attributeForm">
<label class="tooltip-demo">Label</label>
<input type="text" name="attribute_lebel" ng-model="attr_value.label" class="form-control" placeholder="Label Name" required="">
<div ng-show="attributeForm.$submitted || attributeForm.attribute_lebel.$touched" class="">
<span class="text-danger" ng-show="attributeForm.attribute_lebel.$error.required">Label is required.</span>
</div>
<button class="btn btn-w-m btn-success" type="submit">Save</button>
</form>
Here is two form productFormForm and attributeForm But one submit button which is 2nd form. I want to validate both form those fields are blank.
You can validate both forms using js - example
or in html add <span> after your button -
<span ng-show="attributeForm.attribute_lebel.$error.required || productFormForm.from_id_dropdown.$error.required"> Form not valid</span>
I am still new to Angular but I have an existing application that uses Angular 1.5 pretty heavily.
I have a basic form that I need to add a class to depending on the following criteria:
The form can only have an End Date value or an Active for value. It cannot have both. I was thinking I need to disable the input box of the input not being used.
Ex. If a user inputs a date into the End Date input, then the Active for input will become disabled.
I looked into ng-if but every example I came across was for checking if the entered input variable was empty or equal to a value in a .js controller, not checking if the current entered variable was equal to another entered variable in the form.
<div class="form-group">
<label>End date:</label>
<div class="input-group">
<input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group">
<label>Or will be active for:</label>
<input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>
Here is a screenshot of my modal where this happens. Ignore the other inputs as they are not affected by the conditions I've laid out.
Thanks
Form Screen Shot
You can use ng-disabled.
//initialize your dates with null
$scope.updatePatientLabel = {};
$scope.updatePatientLabel.active_end_date = null;
$scope.updatePatientLabel.expiration_time_number = null;
HTML:
<input id="endDate" ng-disabled="updatePatientLabel.expiration_time_number !== null" ng-model="updatePatientLabel.active_end_date" />
<input id="activeDate" ng-disabled="updatePatientLabel.active_end_date !== null" ng-model="updatePatientLabel.expiration_time_number" />
You have a few options. Classes, as you mentioned, or ng-if. The ng-if seems more elegant, like so:
<div class="form-group" ng-if="updatePatientLabel.active_end_date != ''">
<label>End date:</label>
<div class="input-group">
<input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group" ng-if="updatePatientLabel.expiration_time_number > 0">
<label>Or will be active for:</label>
<input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>
Otherwise, you could do an inline conditional outputting "hidden" inside the class attribute only if the value is not present. Something like this:
<div class="form-group {{updatePatientLabel.active_end_date != '' ? '' : 'hidden'}}">
<label>End date:</label>
<div class="input-group">
<input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group {{updatePatientLabel.expiration_time_number > 0 ? '' : 'hidden'}}">
<label>Or will be active for:</label>
<input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>
I use both in my projects, and either way is perfectly acceptable. Though, ng-if does seem more elegant and a bit more suited for this scenario.
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