I am creating a form using angularjs and phpmailer. The input fields are binding and sending correctly, however, i am struggling to grab the title of the form, which is pretty important as the form will be a "service type" request.
HTML:
<div ng-controller="ContactCtrl">
<form ng-submit="submit(contactForm)" name="contactForm" method="post" class="service-form form-horizontal" role="form">
<h3 ng-model="formData.serviceName" id="serviceName">Request for {{ details.name }}</h3>
<div class="form-group" ng-class="{ 'has-error': contactForm.inputName.$invalid && submitted }">
<input ng-model="formData.inputName" type="text" class="inputText text-input" id="inputName" placeholder="Name" required>
</div>
<div class="form-group" ng-class="{ 'has-error': contactForm.inputEmail.$invalid && submitted }">
<input ng-model="formData.inputEmail" type="email" class="inputText text-input" id="inputEmail" placeholder="Email" required>
</div>
<div class="form-group" ng-class="{ 'has-error': contactForm.inputMessage.$invalid && submitted }">
<textarea ng-model="formData.inputMessage" rows="4" id="inputMessage" name="inputMessage" placeholder="Please add your requirements as per the 'Best Practice Checklist'"></textarea>
</div>
<button class="btn default btn-cancel" type="submit" onclick="switcher()">Cancel</button>
<button class="btn default" type="submit">Send</button>
</form>
<p ng-class="result">{{ resultMessage }}</p>
</div>
JS:
.controller('ContactCtrl', ['$scope', '$http', function($scope, $http) {
'use strict';
$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData;
$scope.submitButtonDisabled = false;
$scope.submitted = false;
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
var request = {
method: 'POST',
url: '/forms/contact.php',
data: $.param($scope.formData),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}
$http(request).then(function(data) {
console.log(data);
if (data) {
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result = 'bg-success';
$scope.resultMessage = 'Thanks for the message! We will be in touch very soon.';
$scope.formData = {};
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = data.message;
$scope.result = 'bg-danger';
$scope.resultMessage = 'Ooops! Something went wrong, Please fill out all the fields.';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Ooops! Something went wrong, Please fill out all the fields.';
$scope.result = 'bg-danger';
}
}
}]);
so currently, I've got an h3 and have tried several other options, but the details.name isn't sending out, any help on this would be much appreciated. TIA.
Related
I'm developing a small AngularJs and ASP.net MVC based web application with MongoDb database. And one of it's task is to register yourself if not an already a member. And after successfully submitting data from client side to the server, the user should be redirected to another page.So Data get saved in the database after the submission but It's does not seem to trigger the success function of Angular part where i try to redirect to the other page.
I have attached the image showing non-triggering part of the code highlighting in yellow.
How can i resolve this ? Any help would be appreciated.
[HttpPost]
public JsonResult RegisterUser(User user)
{
mongoClient = new MongoClient();
var db = mongoClient.GetDatabase(Database);
userList = db.GetCollection<User>("user");
var result = userList.AsQueryable().Where(a => a.UserName.Equals(user.UserName)).SingleOrDefault();
user.IsActive = true;
user.UserType = "Visitor";
string message = "";
if (result == null)
{
var seralizedUser = JsonConvert.SerializeObject(userList);
userList.InsertOne(user);
//var seralizedUser = new JavaScriptSerializer().Serialize(userList);
message = "Success";
//return Json(seralizedUser, JsonRequestBehavior.AllowGet);
return Json(new
{
redirectUrl = Url.Action("VisitorChatPanel", "Visitor", ""),
isRedirect = true
});
// return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
else
{
message = "Failed";
//var seralizedUser = new JavaScriptSerializer().Serialize(userList);
var seralizedUser = JsonConvert.SerializeObject(userList);
// return Json(seralizedUser, JsonRequestBehavior.AllowGet);
return Json(new
{
redirectUrl = Url.Action("VisitorChatPanel", "Visitor", ""),
isRedirect = false
});
}
}
angular.module('MyApp', [])
.controller('VisitorRegistrationController', function ($scope, RegistrationService) {
$scope.SubmitText = "Save";
$scope.IsFormValid = false;
$scope.Submitted = false;
$scope.Message = '';
$scope.User = {
UserName: '',
Password: '',
Email: '',
FirstName: '',
LastName: '',
IsActive: false,
UserType: 'Visitor'
};
//validates form on client side
$scope.$watch('f1.$valid', function (newValue) {
$scope.isFormValid = newValue;
});
//Save Data
$scope.SaveData = function (data) {
if ($scope.SubmitText == 'Save') {
$scope.Submitted = true;
$scope.Message = '';
if ($scope.isFormValid) {
// $scope.SubmitText = 'Please Wait...';
$scope.User = data;
alert('data : ' + $scope.User.FirstName);
RegistrationService.SaveFormData($scope.User).then(function (d) {
alert(d);
if (d == 'Success') {
//have to clear form here
ClearForm();
}
$scope.SubmitText = "Save";
});
}
else {
$scope.Message = '';
}
}
}
//Clear Form
function ClearForm() {
$scope.User = {};
$scope.f1.$setPristine(); //here f1 is form name
$scope.Submitted = false;
}
}).factory('RegistrationService', function ($http, $q) {
var fac = {};
fac.SaveFormData = function (data) {
//alert('$http : ' + $http);
var defer = $q.defer();
alert('q : ' + $q);
$http({
url: '/Visitor/RegisterUser',
method: 'POST',
data: JSON.stringify(data),
headers: {'content-type' : 'application/json'}
}).success(function (d) {
// Success callback
alert('Successfully registered !');
if (d.isRedirect) {
window.location.href = d.redirectUrl;
}
defer.resolve(d);
}).error(function (e) {
//Failed Callback
alert('Error!');
// defer.reject(e);
});
return defer.promise;
//return 'Successfull';
}
return fac;
});
;
#{
ViewBag.Title = "VisitorRegistrationForm";
}
<style>
body {
margin-top: 50px;
}
input {
max-width: 300px;
}
.error {
color: red;
}
</style>
<h2>Visitor Registration Form</h2>
<div class="panel panel-info" style="margin-left:30px;margin-right:500px;">
<div ng-controller="VisitorRegistrationController" class="panel-body">
<form novalidate name="f1" ng-submit="SaveData(User)" class="form-horizontal">
<div class="form-group">
<label class="text text-info col-md-offset-2">First Name : </label>
<input type="text" ng-model="User.FirstName" class="form-control col-md-offset-2" name="uFirstName" ng-class="Submitted?'ng-dirty':''" required autofocus />
<span class="error col-md-offset-2" ng-show="(f1.uFirstName.$dirty || Submitted) && f1.uFirstName.$error.required">FirstName required!</span>
</div>
<div class="form-group">
<label class="text text-info col-md-offset-2">Last Name : </label>
<input type="text" ng-model="User.LastName" class="form-control col-md-offset-2" name="uLastName" ng-class="Submitted?'ng-dirty':''" required autofocus />
<span class="error col-md-offset-2" ng-show="(f1.uLastName.$dirty || Submitted) && f1.uLastName.$error.required">LastName required!</span>
</div>
<div class="form-group">
<label class="text text-info col-md-offset-2">Email : </label>
<input type="email" ng-model="User.Email" class="form-control col-md-offset-2" name="uEmail" ng-class="Submitted?'ng-dirty':''" />
<span class="error col-md-offset-2" ng-show="(f1.uEmail.$dirty || Submitted) && f1.uEmail.$error.required">Email required</span>
<span class="error col-md-offset-2" ng-show="(f1.uEmail.$dirty || Submitted) && f1.uEmail.$error.email">Email not valid!</span>
</div>
<div class="form-group">
<label class="text text-info col-md-offset-2">UserName : </label>
<input type="text" ng-model="User.UserName" class="form-control col-md-offset-2" name="uUserName" ng-class="Submitted?'ng-dirty':''" required />
<span class="error col-md-offset-2" ng-show="(f1.uUserName.$dirty || Submitted) && f1.uUserName.$error.required">UserName required!</span>
</div>
<div class="form-group">
<label class="text text-info col-md-offset-2">Password : </label>
<input type="password" ng-model="User.Password" class="form-control col-md-offset-2" name="uPassword" ng-class="Submitted?'ng-dirty':''" required />
<span class="error col-md-offset-2" ng-show="(f1.uPassword.$dirty || Submitted) && f1.uPassword.$error.required">Password required!</span>
</div>
<div class="form-group">
<label></label>
<input type="submit" class="btn btn-success col-md-offset-2" value="{{SubmitText}}" />
</div>
</form>
</div>
</div>
I built a sign up from using angularjs. The submitting process is OK. Then I want to make a validation of checking if the email is already registered. If exist, show the error message informing that the email exists. The problem I face is when user changes the email address, the submitted email is still the previous one. How to tell angular that the input value has changed and submit the newly inserted values.
My sign up form
<div ng-controller="signupController">
<form ng-submit="doSignup()">
<h2 class="form-signin-heading">Sign Up</h2>
<div class="login-wrap">
<input type="text" name="email" class="form-control" autofocus="" ng-model="formData.email">
<span class="text-danger">{{ emailExistError }}</span>
<input type="password" name="password" class="form-control" placeholder="Password" ng-model="formData.password">
<input type="password" name="password_conf" class="form-control" placeholder="">
<button class="btn btn-lg btn-login btn-block" type="submit">Sign Up</button>
</div>
</form>
</div>
The app.js
angular.module('myApp', ['ngRoute', 'ngSanitize'])
.controller('mainController', function ($scope, $http) {
})
.controller('signupController', function ($scope, $http,$window) {
$scope.formData = {};
$scope.doSignup = function () {
$http({
method: 'post',
url: 'signup.php',
data: $.param($scope.formData),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (data) {
$scope.login = data;
if (data.status == 'ok') {
$('#successModal').modal('show');
}
else if (data.status == 'email exist'){
$scope.emailExistError = 'Email exist. Use different email';
}
else {
$('#failedModal').modal('show');
}
})
}
})
try
$watch('email',function(newVal,oldVal){
if(newVal!=oldVal){
$scope.doSignup();
}});
I have a form as below, and I used angularJs SPA for this application. This is the one form of my SPA among lot of forms.I need to point out how to display error messages responded from corresponding php process file via angularJs
My lends.php page is below,
<?php
$userid= $_POST['userid'];
$copyid = $_POST['copyid'];
//$set_success = array($userid,$copyid);
require_once '../../../core/database/connect.php';
$errors = array();
$data = array();
//.... queries......
if(empty($userid) || empty($copyid)){
$data['success'] = false;
$data['errors'] = "Fill both fields";
}else if($numrows == 0){
//internal codes ...........
}else{
$enterdeal = "INSERT INTO user_lends_copies(id,user_id,copy_id,date_lend,due_date,status) VALUES (NULL,'$userid','$copyid','$dateb','$dated','open')";
if($connection->query($enterdeal) === TRUE){
$data['success'] = true;
$data['message'] = "New record created successfully";
}else{
$errors = $connection->error;
$data['success'] = false;
$data['errors'] = $errors;
}
$connection->close();
if( !empty($errors)) {
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
} else {
// if there are no errors, return a message
$data['success'] = true;
$data['message'] = 'Success!';
}
}
echo json_encode($data);
?>
And here is my app.js file
dash.controller('lendingController',['$scope','$log','$http',function($scope,$log,$http){
$scope.formData = {};
$scope.processFormLends = function(){
$http({
method: "POST",
url: "../admin/pages/processing/lends.php",
data: $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.then(function(data){
console.log(data);
if(data.success == false){
$scope.errorCopy = data.errors;
}else{
$scope.message = data.message;
$scope.errorCopy= "";
$scope.errorUser = "";
}
});
};
}]);
// PS: Top of the SPA index page I have like below //
<body ng-app="dash">
And I have attached my lending page,(view page of the app) below,
div class="dashtitle">
<h2>Lending</h2>
</div><br/>
<h4>Lend book</h4>
<form ng-submit="processFormLends()">
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error' : errorCopy }">
<label for="Title">Copy ID:</label>
<input type="number" ng-minlength="1" class="form-control" name="copyid" ng-model="formData.copyid">
<span class="help-block" ng-show="errorCopy">{{ errorCopy }}</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error' : errorUser }">
<label for="Title">User ID:</label>
<input type="number" ng-minlength="1" class="form-control" name="userid" ng-model="formData.userid">
<span class="help-block" ng-show="errorUser">{{ errorUser }}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span id="errMessage" ng-show="message">{{ message }}</span>
<span id="errMessage" ng-show="data">{{ errorCopy }}</span>
<input type="submit" value="Lend Book" class="form-control blue" name="submit" ng-click=".success()">
</div>
</div>
</form>
<pre>{{ formData }}</pre>
And I have getting corresponding error messages successfully in Console log, but it is not displayed on the browser page. And Only when no error messages and have only a success message the "Success!" message is displayed. Please give me a tip to correct this! Big help!
I have a form which seems to work well on the most part. However, my selects are playing up a bit, and I cant seem to submit the form. My form looks like
<form ng-submit="submit(emailform)" name="emailform" method="post" action="" class="form-horizontal emailType" role="form">
<div class="form-group" ng-class="{ 'has-error': emailform.inputTitle.$invalid && submitted }">
<label for="inputTitle" class="col-lg-4 control-label">Title</label>
<div class="col-lg-8">
<select ng-model="formData.inputTitle" data-ng-options="title for title in titles" id="inputTitle" required>
<option value="">Please select</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': emailform.inputName.$invalid && submitted }">
<label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
<div class="col-lg-8">
<input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': emailform.inputLinks.$invalid && submitted }">
<label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
<div class="col-lg-8">
<select ng-model="formData.inputLinks" data-ng-options="link for link in links" id="inputLinks" required>
<option value="">Please select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
Send Message
</button>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
So a simple form with two selects and one input. My Controller looks like the following
'use strict';
/* Controllers */
function EmailViewCtrl($scope, $http) {
$scope.titles =
[
"Mr",
"Mrs",
"Miss",
"Ms",
"Dr"
];
$scope.links =
[
"email1",
"email2",
"email3",
"email4",
"email5"
];
$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted
$scope.submit = function(emailform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (emailform.$valid) {
$http({
method : 'POST',
url : 'backend/email.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
}).success(function(data){
console.log(data);
if (data.success) { //success comes from the return json object
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-success';
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> Please fill out all the fields.';
$scope.result='bg-danger';
}
}
}
EmailViewCtrl.$inject = ['$scope', '$http'];
Now the problem is, my selects on their default option (please select) have a red border around them on page load. Obviously this should not appear until they submit the form without an option selected.
Secondly, if I provide the form with valid data, the submit button does not seem to become active. How can I make this active?
Lastly, at the moment, everything is in one controller. Should I move things like the selects values into their own controller and what would be the best way to achieve this?
Thanks
You can use form.input.$dirty to check if an input has been touched and only in that case show a validation error.
ng-class="{ 'has-error': emailform.inputName.$invalid && emailform.inputName.$dirty }"
See the example below for a working copy of your code:
var app = angular.module("app", []);
app.controller("EmailViewCtrl", function EmailViewCtrl($scope, $http) {
$scope.titles = [
"Mr",
"Mrs",
"Miss",
"Ms",
"Dr"
];
$scope.links = [
"email1",
"email2",
"email3",
"email4",
"email5"
];
$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted
$scope.submit = function(emailform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (emailform.$valid) {
alert("POST!");
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> Please fill out all the fields.';
$scope.result = 'bg-danger';
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="EmailViewCtrl">
<form ng-submit="submit(emailform)" name="emailform" method="post" action="" class="form-horizontal emailType" role="form">
<div class="form-group" ng-class="{ 'has-error': emailform.inputTitle.$invalid && emailform.inputTitle.$dirty }">
<label for="inputTitle" class="col-lg-4 control-label">Title</label>
<div class="col-lg-8">
<select class="form-control" ng-model="formData.inputTitle" data-ng-options="title for title in titles" id="inputTitle" required>
<option value="">Please select</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': emailform.inputName.$invalid && emailform.inputName.$dirty }">
<label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
<div class="col-lg-8">
<input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': emailform.inputLinks.$invalid && emailform.inputLinks.$dirty }">
<label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
<div class="col-lg-8">
<select class="form-control" ng-model="formData.inputLinks" data-ng-options="link for link in links" id="inputLinks" required>
<option value="">Please select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
Send Message
</button>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>
I am using a $modal in angular and, after a simple cycle of creating the modal and dismissing it, the main controller breaks with:
TypeError: object is not a function
at http://localhost:1337/bower_components/angular/angular.min.js:178:79
at f (http://localhost:1337/bower_components/angular/angular.min.js:195:177)
at h.$eval (http://localhost:1337/bower_components/angular/angular.min.js:113:32)
at h.$apply (http://localhost:1337/bower_components/angular/angular.min.js:113:310)
at HTMLAnchorElement.<anonymous> (http://localhost:1337/bower_components/angular/angular.min.js:195:229)
at http://localhost:1337/bower_components/angular/angular.min.js:31:225
at r (http://localhost:1337/bower_components/angular/angular.min.js:7:290)
at HTMLAnchorElement.c (http://localhost:1337/bower_components/angular/angular.min.js:31:207)
The main controller logic looks like:
(function(){
var app = angular.module('butler-user', ['ui.bootstrap']);
app.controller('UserController', ['$http', '$log', '$state', '$modal', '$scope', 'UserStatusService', function($http, $log, $state, $modal, $scope, UserStatusService) {
var self = this;
self.flash = '';
self.users = [];
self.newUser = {};
self.editUser = {};
$http.get('/user')
.success(function(data, status, headers, config) {
self.users = data;
})
.error(function(data, status, headers, config){
console.log('error getting data from /user');
$log.error("Error in get from /user: '"+config+"'");
});
var CreateUserModalCtlr = function ($scope, $modalInstance, userForm) {
$scope.userForm = {};
$scope.submitted = false;
$scope.validateAndCreate = function () {
console.log('Entering validateAndCreate()');
$scope.submitted = true;
if ($scope.userForm.$valid) {
console.log('Creating user with:'+JSON.stringify(self.newUser));
$http.post('/register', self.newUser)
.success(function(data, status, headers, config) {
console.log('response from /register'+data+' status:'+status)
if (status == 200) {
self.newUser = {};
$scope.submitted = false;
$http.get('/user')
.success(function(data, status, headers, config) {
self.users = data;
})
.error(function(data, status, headers, config){
$log.error("Error in get from /user: '"+config+"'");
});
$modalInstance.close('closed');
} else {
self.flash = 'Error creating new user';
}
})
.error(function(data, status, headers, config) {
console.log('Error in /register:'+status);
$modalInstance.close('closed');
});
}
};
$scope.cancelModal = function () {
console.log('Entering cancelModal()');
$modalInstance.dismiss('cancel');
};
};
self.addUser = function () {
var modalInstance = $modal.open({
templateUrl: '/admin/partials/CreateUser.html',
controller: CreateUserModalCtlr,
scope: $scope,
resolve: {
userForm: function () {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
The modal template looks like:
<div class="modal-header">
<h3>Create New User</h3>
</div>
<div class="modal-body">
<form name="userForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' : userForm.firstName.$invalid && submitted }" >
<label>First Name</label>
<input name='firstName' class="form-control" type='text' ng-model='userCtlr.newUser.firstName' required ng-minlength=1>
<p ng-show="userForm.firstName.$invalid && submitted" class="help-block">First name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.lastName.$invalid && submitted }">
<label>Last Name</label>
<input name='lastName' class="form-control" type='text' ng-model='userCtlr.newUser.lastName'required ng-minlength=1>
<p ng-show="userForm.lastName.$invalid && submitted" class="help-block">Last name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="email" name="username" class="form-control" ng-model="userCtlr.newUser.username">
<p ng-show="userForm.username.$invalid && submitted" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.username2.$invalid && !userForm.username2.$pristine }">
<label>Confirm Username</label>
<input type="email" name="username2" class="form-control" ng-model="userCtlr.newUser.username2">
<p ng-show="userForm.username2.$invalid && !userForm.username2.$pristine && submitted" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="userCtlr.newUser.password" required ng-minlength=8>
<p ng-show="userForm.password.$error.minlength && submitted" class="help-block">Password is too short.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password2.$invalid && !userForm.password2.$pristine }">
<label>Confirm Password</label>
<input type="password" name="password2" class="form-control" ng-model="userCtlr.newUser.password2" required ng-minlength=8>
<p ng-show="userForm.password2.$error.minlength && submitted" class="help-block">Password is too short.</p>
</div>
<br><br>
{{registerCtlr.flash}}
</div>
<div class="modal-footer">
<button type="button" class="btn"
data-ng-click="cancelModal());">Cancel</button>
<button class="btn btn-primary"
data-ng-click="validateAndCreate();">Create User</button>
</div>
The main HTML page looks like:
<div clas='row' ng-controller='UserController as userCtlr'> <!-- Use bootstrap grid layout -->
<div class="col-md-8">
<table class='table table-striped'>
<thead>
<td>Email Address</td><td>First Name</td><td>Last Name</td>
</thead>
<tr ng-repeat='user in userCtlr.users'>
<td> <a ng-click='userCtlr.editUser(user)'>{{user.emailAddress}}</a></td>
<td> {{user.firstName}}</td>
<td> {{user.lastName}}</td>
</tr>
<tr>
</tr>
</table>
<form name='userForm' ng-submit='userCtlr.addUser()' novalidate>
<input type='submit' value='createNewUser'/>
</form>
</div>
</div>
I am new to the $modal (and Angular in general). I suspect that somehow dismissing the modal is breaking the main controller (or its variables), but I don't understand enough of how this all works to grog what I did wrong.
Any help is appreciated,
Charlie