Skip to content

Instantly share code, notes, and snippets.

@rnkoaa

rnkoaa/app.js

Created January 9, 2014 13:14
Show Gist options
  • Star 30 You must be signed in to star a gist
  • Fork 18 You must be signed in to fork a gist
  • Save rnkoaa/8333940 to your computer and use it in GitHub Desktop.
Save rnkoaa/8333940 to your computer and use it in GitHub Desktop.
Download ZIP
A simple angularjs with angular-ui modal form which includes validation on the client side. Thanks http://scotch.io/tutorials/javascript/angularjs-form-validation
Raw
app.js
var app = angular.module("modalFormApp", ['ui.bootstrap']);
app.controller("modalAccountFormController", ['$scope', '$modal', '$log',
function ($scope, $modal, $log) {
$scope.showForm = function () {
$scope.message = "Show Form Button Clicked";
console.log($scope.message);
var modalInstance = $modal.open({
templateUrl: 'modal-form.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
userForm: function () {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
$scope.form = {}
$scope.submitForm = function () {
if ($scope.form.userForm.$valid) {
console.log('user form is in scope');
$modalInstance.close('closed');
} else {
console.log('userform is not in scope');
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Modal Forms</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body { padding-top:30px; }
</style>
<!-- JS ===================== -->
<!-- load angular -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="modalFormApp">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header">
<h1>AngularJS Form Validation</h1>
</div>
<div ng-controller="modalAccountFormController">
<div class="page-body">
<button class="btn btn-primary" ng-click="showForm()">Create Account</button>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
modal-form.html
<div class="modal-header">
<h3>Create A New Account!</h3>
</div>
<form name="form.userForm" ng-submit="submitForm()" novalidate>
<div class="modal-body">
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<p ng-show="form.userForm.name.$invalid && !form.userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="form.userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="form.userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email" required>
<p ng-show="form.userForm.email.$invalid && !form.userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" ng-disabled="form.userForm.$invalid">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
@julianshaw2000
Copy link

good stuff, I was nearly there, but your post helped me finish it off. thanks.

@vionescu
Copy link

vionescu commented Dec 1, 2014

Thank you.

@ccnixon
Copy link

ccnixon commented Oct 23, 2015

Awesome job, this saved me

@MarcAlx
Copy link

MarcAlx commented Jun 16, 2016

Works perfectly ;)
As point out by : http://stackoverflow.com/questions/18733680/unknown-provider-modalprovider-modal-error-with-angularjs,
$modal is now $uibModal
$modalInstance is now $uibModalInstance

@mandeepm91
Copy link

Thanks a lot! This was really helpful

@jerryz1982
Copy link

cancel button's type need to be set to type=button because its default value is submit and that would trigger submitForm to be called.

@rvaka547
Copy link

rvaka547 commented Dec 1, 2016 •
edited

Hi,

I am trying to implement this code. Everything looks fine, but I am not able to get the modal. When I click on the button, I am getting the blur screen but no modal popup. On console, I don't see any errors. It looks clear, but I am not getting any modal popup. Is modal popup getting overshadowed by any css? Can you help me.

@NiranjanUv
Copy link

Thank you !!

@mhtbhavsar
Copy link

Thanks a lot!

@lrkwz
Copy link

lrkwz commented May 25, 2017

Cors limitations break your code since the external template cannot be loaded.
Take a look at https://gist.github.com/lrkwz/aa7cf9f589f36f830e5c4d23e3a1a5a5

@bbbcube
Copy link

bbbcube commented Oct 22, 2017

Thanks, This example helps me a lot.

@rafaduka
Copy link

This example did save the day

@roxanabeloiu
Copy link

Good example. Works great!

@patbi
Copy link

patbi commented Mar 7, 2018

merci

@soumerencio
Copy link

Thank you !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment