modal is losing focus on device with narrower display - angularjs

My app has ui-bootstrap modal with a few inputs and button. It works perfectly on desktop, but on narrower screen the modal is losing focus (cursor disappears from input box) after releasing mouse button, so it's quite difficult to enter anything there.
TIP: It works when I have mouse button pressed. I'm able to enter test:).
modal code:
<div ng-controller="LoginModalCtrl as $ctrl" class="modal-login">
<script type="text/ng-template" id="loginModalContent.html">
<div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
</div>
<div class="modal-body">
<form method="post" name="submit_reg">
<label for="login">Login:</label>
<input type="text" placeholder="login" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />
<label for="password">Hasło:</label>
<input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />
Zapomniałem hasła :(
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$ctrl.cancel()">Zamknij</button>
<button type="button" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
</div>
</div>
</div>
</script>
<A ng-click="$ctrl.open()">Zaloguj</A>
</div>
index.html:
<!-- angular modules -->
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/ui-bootstrap.min.js"></script>
<script src="scripts/angular/angular-animate.min.js"></script>
<script src="scripts/angular/angular-touch.min.js"></script>
<script src="scripts/angular/angular-local-storage.min.js"></script>
UPDATE 1:
I added ngTouch to application modules, but still the same problem:
var app = angular.module('XXXX', [
'ngRoute', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]).
UPDATE 2: after implementing UPDATE1 it works a bit better:It works stable in FF &IE11, but sometimes it fails in Chrome.

Related

Form validation with Bootstrap 4 and AngularJS

I have a form made with Bootstrap 4 and AngularJS and I want to make a simple form validation where I could:
validate input fields AFTER user has touched them,
show two different error messages depending on validation constraint,
create custom validation constraint (e.g. compare password and password confirmation field).
1.
In previous versions of Bootstrap you could do something like:
<div class="form-group" ng-class="{'has-error': userForm.email.$invalid && userForm.email.$touched}">
but with Bootstrap 4, there is no 'has-error' class. I tried to use 'is-invalid' class instead
<div class="form-group" ng-class="{'is-invalid': userForm.email.$invalid && userForm.email.$touched}">
but nothing happens. I managed to make it work as it is shown in Bootstrap 4 Documentation but validation happens only after the form submission and not when user has touched the input field.
2.
There are no error messages in Bootstrap 4, only 'invalid-feedback' and I can't figure out how to change message text depending on which constraint was violated. I tried something like:
<div class="invalid-feedback">
<p ng-show="userForm.email.$error.required">Required</p>
<p ng-show="userForm.email.$error.email">Enter a valid email</p>
</div>
but this does not work.
3.
I tried to make an Angular directive but because 1. and 2. didn't work I couldn't test this.
Any help will be appreciated.
UPDATE
As Peter Wilson suggested, nothing was wrong with my code. The code didn't work because my form was in a modal window and modal window must have a separate controller in AngularJS to be able to work correctly.
the is-invalid class is the right answer you may have another problem with your form so check my below demo
Note to test touched input you have to focus on the input and then leave focus to trigger touched state
angular.module('myApp',[])
.controller('myCtrl',function(){
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="myApp" class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div ng-controller="myCtrl" class="container">
<form name="loginForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" ng-model="email" required class="form-control" name="email" ng-class="{'is-invalid':loginForm.email.$error.required && loginForm.email.$touched}" placeholder="Enter email">
<small ng-show="loginForm.email.$error.required && loginForm.email.$touched" id="emailHelp" class="form-text text-danger">email is required.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>

How to get popup when url status success in angular js

I am doing an event scheduler app using angular js. In calendar when i am clicking the event i am sent the event id to back end to getting event details.Here how to get the pop up on my calendar when the url status is true.
My code is:
$scope.alertOnEventClick = function( date, jsEvent, view){
var event_id=date.id;
$http.post("Youin-api/v2/business/event_information",{"event_id":event_id}).then(function(response) {
if(response.error="true")
{
$scope.eventInformation= response;
}
});
};
My bootstrap model pop up is:
<div class="modal fade" id="AddUsers" ng-model="eventInformation" role="dialog">
<div class="modal-dialog " style="top:80px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<p><form role="form" ng-submit="AddUsers(addusers)">
<div class="form-group">
<label for="pwd">User Type</label>
<input type="text" class="form-control" id="user_type" ng-model="addusers.user_type" value="{{addusers.user_type}}">
</div>
<div class="form-group">
<label for="pwd">Created By</label>
<input ty{{addusers.user_type}}pe="text" class="form-control" id="created_by" ng-model="addusers.created_by" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form></p>
</div>
</div>
</div>
</div>
thanks in advance..!!
To manually trigger modal to show from javascript. Use this.
$('#AddUsers').modal('show')
Note: You have to add bootstrap.js and jquery.js to use this functionality.
You can view the complete modal api options here.
Wherever you want to open the modal based on your condition you can achieve the same using following:
angular.element(document.getElementById("AddUsers")).modal();

how to make md-toolbar as responsive

i am using a md-toolbar for my page and it is not adjusting to full window, how to make it responsive(media queries ) in desktop as well as mobiles ?
index.html
<md-toolbar>
<div class="md-toolbar-tools">
<!-- Logo -->
<img src="img/logo/1.png">
<!-- navbar Search -->
<div class="navbar-collapse" id="navbar-collapse-1">
<div id="right">
<form class="navbar-form" role="search">
<div class="input-group add-on">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<input type="text" class="form-control" placeholder="Search Properties" >
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-info">For Landlords</button>
<!-- Side Menu -->
<md-button type="button" class="btn btn-info" >
Menu
</md-button>
</div>
</md-toolbar>
Include a viewport-meta-tag like <meta name="viewport" content="width=device-width">

Onsen ui and bootstrap datepicker

i've tried to use a datepicker in Onsen Ui , but no sucess! Seems ng-click is empty. I guess it's a problem with : JS dependencies (order matters!).
Working out onsen project , i have no problem
angular.module("MyModule", ["ui.bootstrap"]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
<div ng-app="MyModule">
<div class="form-group">
<label for="BirthDate" class="control-label col-sm-4">BirthDate</label>
<div class="col-sm-6">
<p class="input-group">
<input
type="text"
class="form-control"
id="BirthDate"
ng-model="NewEmployee.BirthDate"
datepicker-popup="dd.MM.yyyy"
is-open="Opened"
ng-click="Opened=true">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="Opened=true">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
My doubt: in the code bellow where i can paste my dependencies ? Head section, or body?
I've uploaded an example of what you are trying to achieve.
Here is the link --> Download from here

How to Show and Hide Element With Checkbox Status in Angularjs

Can you please let me know how I can show and Hide an element in angular? in following example I want to initially hide the #item-details and show it if check box checked or Hide if un-check
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
var app = angular.module('app', [])
.controller('checkController', function() { });
this.
});
</script>
</body>
</html>
First assign an model to the check box
<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>
then simply assign the same model value to item-details in ng-show
<div class="col-md-6" id="item-details" ng-show="checked">
you are done
Example
var app = angular.module('app', []);
app.controller('checkController', function($scope) {
$scope.hide = false;
$scope.checkboxClick = function() {
$scope.hide = !$scope.hide;
};
});
HTML:
<body ng-app="app">
<div ng-controller="checkController" class="container">
<div class="row">
<div class="col-md-2">
<input type="checkbox" ng-click="checkboxClick()" value="new" name="item" /> Add New Item
<br />
</div>
<div ng-show="hide" id="item-details" class="col-md-6">
<div aria-label="..." role="group" class="btn-group">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</div>
</div>
</body>
In one way or the other, the ng-show is not working but I use the ng-if as a work around which work perfectly.
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" ng-model="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-if="item == true">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
hope is helps thanks.
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" ngmodel="checked" ngchecked="checked == '1'"/>Add New Item <br /></div>
<div class="col-md-6" id="item-details" ngshow = "checked == '1'">
<div class="btn-gr`enter code here`oup" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
Just do above

Resources