I am working on a modal with Angular 2. So far so good no errors but then... When i press on the button nothing appears. Am i missing something? Surely i do..
this is my template
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
{{demoInfo | json}}
</div>
<div class="modal-body">
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
<div class="col-md-7">
Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
</div>
<div class="col-md-7">
Password: <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
this is my template component
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators } from '#angular/common';
class DemoInfo {
name: string;
password: string;
}
#Component({
template: require('./template.component.html'),
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class ModalComponent {
CreateGroup: ControlGroup;
demoInfo: DemoInfo;
constructor(fb: FormBuilder) {
this.demoInfo = new DemoInfo();
this.CreateGroup = fb.group({
'name': new Control(this.demoInfo.password),
'password': new Control(this.demoInfo.password)
})
}
addNewGroup(demoInfo: DemoInfo) {
console.log(demoInfo, 'whole object');
this.demoInfo = new DemoInfo();
}
}
Make sure have installed Bootstrap.js. Angular-ui won't work without it.
Make sure in your script tag the Bootstrap installs first.
src="~/Scripts/bootstrap.js"
src="~/Scripts/angular.js"
src="~/Scripts/app/app.js"
src="~/Scripts/ui-bootstrap-tpls-2.0.0.js"
Make sure you add a dependency to ui.bootstrap in your module (at least in Angular 1.5) I'm unfamiliar with Angular 2.
Let me know if this doesn't fix your issue.
I didn't add ng2-bootstrap library in my Angular js.
If you are new with Angular and you want to implement bootstrap js components the correct way i recommend to read the ng2 documentation.
I followed the steps on this link https://valor-software.com/ng2-bootstrap/#/
Related
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();
Hello my fellow stackoverflowers,
I guess i have a simple question.
In my html i have a Modal Dialog that pops up. It uses ng2 Bootstrap. It works and all but... I want this code
"<button class="btn btn-primary" (click)="showModal()">Login</button>"
(showModal())
replace it in my ts file as a function
showModal(modal: ModalDirective) {
}
How can i do this? i am already struggling more then a hour.
This is my full HTML Code.
<button class="btn btn-primary" (click)="showModal()">Login</button>
<!-- Modal -->
<div bsModal #lgModal="bs-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true"> ×</span>
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="myForm" role="form" [ngFormModel]="CreateGroup">
<div class="form-group">
<div class="input-group">
<input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name' placeholder="Gebruikersnaam">
<label for="uLogin" class="input-group-addon glyphicon glyphicon-user"></label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password' placeholder="Wachtwoord">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-lock"></label>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
and hits is my full TS code
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '#angular/common';
import { ModalDirective, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
class DemoInfo {
name: string;
password: string;
}
#Component({
template: require('./template.component.html'),
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ModalDirective],
viewProviders: [BS_VIEW_PROVIDERS]
})
export class ModalComponent {
CreateGroup: ControlGroup;
demoInfo: DemoInfo;
modal: ModalDirective;
constructor(fb: FormBuilder) {
this.demoInfo = new DemoInfo();
this.CreateGroup = fb.group({
'name': new Control(this.demoInfo.name),
'password': new Control(this.demoInfo.password)
})
}
addNewGroup(demoInfo: DemoInfo) {
console.log(demoInfo, 'whole object');
this.demoInfo = new DemoInfo();
}
showModal(modal: ModalDirective) {
}
hideModal(modal: ModalDirective) {
}
}
So this is what i did.
I added #ViewChild('lgModal') modal: any; in my ModalComponent
made a new function called showModal()
and referenced it by calling this.modal.dosomething();
This is supposed to be a simple registration page. At this stage of the game all I want to do is have an error logged to the console when I try to submit, but the buttons on the registration page are dead, as if they're not connected to my controller and directive at all.
console.log works otherwise, as I will get the path location logged. (See the constructor.) All of the form validation code in register.html works splendidly.
It gets crazier: If I remove the <navbar></navbar> from register.html all of the sudden the submit button works. I get the error logged to the console, but the evaluate button still does nothing. I have the navbar directive on a few other pages and their buttons all work correctly.
register.ts
class Register implements IRegisterCtrl {
constructor(public $http: ng.IHttpService,
public $location: ng.ILocationService) {
console.log($location.path());
}
public sendIt(): void {
console.log("submit run.");
var url: string = "/";
var user: any = {};
this.$http.post(url, user)
.then(function (res: any): void {
console.log("success http");
})
.catch(function (err: any): void {
console.log("fail http");
});
}
public static evaluateIt(): void {
console.log("evaluated");
}
} // end class
function register(): ng.IDirective {
return {
bindToController: true,
controller: Register,
controllerAs: "vm",
replace: true,
restrict: "AE",
template: require("./register.html"),
};
}
angular
.module("app")
.directive("register", register);
register.html
<div>
<!-- when this is removed, sendIt() works, but not evaluateIt() -->
<navbar></navbar>
<div class="container-fluid">
<form name="register" ng-submit="vm.sendIt()" class="form-signin" novalidate>
<h1 class="form-signin-heading text-muted">Register</h1>
<input name="email" placeholder="Email Address" type="email" class="form-control" maxlength="320"
ng-model="vm.email"
ng-minlength="7"
required>
<div ng-messages="register.email.$error" ng-if="register.email.$touched">
<p class="help-block" ng-message="required">An email address is required.</p>
<p class="help-block" ng-message="minlength">This email address is too short.</p>
<p class="help-block" ng-message="email">Please enter a valid email address.</p>
</div>
<input name="password" placeholder="Password" type="password" class="form-control" maxlength="115"
ng-model="vm.password"
ng-minlength="6"
required>
<div ng-messages="register.password.$error" ng-if="register.password.$touched">
<p class="help-block" ng-message="required">A password is required.</p>
<p class="help-block" ng-message="minlength">Too short. Try an entropic phrase.</p>
</div>
<input name="password_confirm" placeholder="Confirm Password" type="password" class="form-control" maxlength="115"
ng-model="vm.password_confirm"
required>
<p class="help-block" ng-show="register.password_confirm.$dirty && vm.password !== vm.password_confirm">Please make the passwords match.</p>
<button ng-disabled="register.$invalid || vm.password !== vm.password_confirm" class="btn btn-lg btn-primary btn-block" type="submit">
Submit
</button>
</form>
<button type="button" ng-click="vm.evaluateIt()">Evaluate</button>
</div>
</div>
I'm using webpack, but I'm not minifying anything right now. All other pages work as they should.
How can I have the buttons work as normal? Why could the navigation bar be conflicting with the submit button in this instance?
navbar.ts
class Navbar implements INavbarCtrl {
} // end class
function navbar(): ng.IDirective {
return {
bindToController: true,
controller: Navbar,
controllerAs: "vm",
replace: true,
restrict: "AE",
template: require("./navbar.html"),
};
}
angular
.module("app")
.directive("navbar", navbar);
navbar.html
<div>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home">Js Algorithm Flashcards</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="dashboard">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="register">Register</a></li>
<li ui-sref-active="active"><a ng-href="/">About</a></li>
<li ui-sref-active="active"><a ng-href="/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
The problem (as you've already spotted it) is that the method evaluateIt cannot be bound to vm as it is defined as static method.
But why does the sendIt button not work when the navbar component is included in the register template ?
Because both components have non-isolated scopes and the scope is clobbered using the same alias, vm.
I am using Bootstrap Modal. I need multiple action button for different purpose in a single Modal. I already have two button close and ok . i need another called submit or save.
<div class="modal-body">
<div class="row">
<div class="col-lg-8">
<select class="form-control" data-ng-model="review.sessionid" ui-select2 class="comboselection">
<option data-ng-repeat="review in modalOptions.reviews" value="{{review.oid}}">{{review.sessionName}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<textarea class="form-control" name="review.news" data-ng-model="review.news"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnsubmit" type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(review)" ><i class="glyphicon glyphicon-ok"></i>{{modalOptions.actionButtonText}}</button>
<button class="btn btn-deafult" data-ng-click="modalOptions.close()"><i class="fa fa-times"></i>{{modalOptions.closeButtonText}}</button>
</div>
Close button is for close the modal. ok button is pass the object in controller via result variable of modalService.showModal(modalDefaults, modalOptions).then(function (result) . Here is my controller..
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Submit',
headerText: 'Review PMP',
reviews: reviewlist
};
var modalDefaults = {
templateUrl: 'app/partials/pmpReviewModal.html'
};
modalService.showModal(modalDefaults, modalOptions).then(function (result) {
var sessionName = result.sessionName;
var session = result.news;
console.log(sessionName);
});
But my problem is that how can i add another button for pass object for another purpose to the controller ?
I am using webshims for HTML support in IE8. My HTML form validation is working in IE8. But when I have a form in a popup (I am using Angular UI Modal), on form submit(ng-submit) the modal box closes and the validation message appears on top right corner.
My Environment is
jquery-1.11.1.js
AngularJS v1.2.26
Angular UI Modal 0.10.0
webshim-1.15.4
In the console I get this script error
"invalid element seems to be hidden. Make element either visible or use disabled/readonly to bar elements from validation. With With fieldset[disabled] a group of elements can be ignored! In case of select replacement see shims/form-combat.js to fix issue."
part my Angular app HTML loading webshims
<script src="resources/js/jquery-1.11.1.js"></script>
<script src="resources/js/js-webshim/minified/polyfiller.js"></script>
<script>
$.webshims.setOptions('forms', {
overrideMessages : true
});
$.webshims.setOptions({
waitReady : false
});
$.webshims.polyfill();
</script>
// below method in angular app to update Polyfill when dynamic view loads.
angular.module('essApp').run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$('body').updatePolyfill();
});
});
My angular function to call a popup/modal
$scope.showGoalDetail = function(index) {
$log.info('index is', index);
$log.info('goal is', $scope.goals.goalList[index]);
var modalInstance = $modal.open({
templateUrl : 'org/goalDetailPopUp.html',
controller : 'PopUpInstanceCtrl',
size : 'lg',
backdrop : 'static',
resolve : {
valueObject : function() {
var valueObject = new Object();
valueObject.goal = {};
angular.copy($scope.goals.goalList[index], valueObject.goal);
valueObject.kpiList=$scope.goals.kpiList;
return valueObject;
}
}
});
My form in Modal Window
<div class="modal-header" style="background-color: #428bca; color: #FFFFFF">
<h3 class="modal-title">Goal Detail</h3>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<p class="panel-title">Administration of prespective and priority</p>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" ng-submit="ok()">
<div class="form-group">
<label class="col-md-2 control-label">Dimension</label>
<div class="col-md-6">
<input type="text" class="form-control" required disabled ng-model="valueObject.goal.perspectiveDesc">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Key PerformanceIndicator</label>
<div class="col-md-10">
<textarea class="form-control" required ng-model="valueObject.goal.keyPerformanceIndicator"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">OK</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</form>
</div>
</div>
</div>
<div class="modal-footer"></div>
I need the validations to appear properly on popup next to the field