Following is my code
// LoginCtrl.js
angular.module('homeon', [ 'ngMessages' ]).controller('loginCtrl',
function($rootScope, $scope, $state, $ionicLoading, dbservices, server) {
//--------------------------------- my code-------------
})
<!-- login.html-->
<link href="css/login.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css">
<!-- load angular -->
<script src="http://code.angularjs.org/1.4.3/angular.js"></script>
<!-- load ngmessages -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<!-- load our custom app -->
<script src="js/loginCtrl.js"></script>
<body ng-app="homeon">
<ion-view view-title="Login">
<ion-content>
<form name="loginForm" ng-submit="doLogin(loginForm)" novalidate="">
<div class="list list-inset">
<label class="item item-input itemLabel">
<input type="email" name="username" placeholder="Email" ng-model="username" required="required" ng-minlength="5" >
</label>
<label class="item item-input itemLabel">
<input type="password" name="password" placeholder="Password" ng-model="password" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[A-Z])(?=.*[!##$%^&*]).{8,}" autocapitalize="off" autocomplete="off" autocorrect="off">
</label>
<div ng-messages="loginForm.username.$error" style="color:red; align:center">
<span ng-message="required">Please enter user name</span>
<span ng-message="minlength">Length of email must be minimum 5 characters</span>
<span ng-message="email">Please enter valid email</span>
<div>
</div ng-messages="loginForm.password.$error" style="color:red; align:center">
<span ng-message="required">Please enter password</span>
<span ng-message="pattern">The passwords must be at least 8 characters and include an
uppercase, lowercase, number, and special character</span>
</div>
<button type="submit" class="button button-block" ng-click="" >Login</button>
</div>
</form>
</ion-content>
</ion-view>
</body>
I am getting 'ngMessages' not instantiated error in browser. Can you please let me know where am I doing wrong or why I am getting this error?
Thanks in advance.
Include <script src="js/angular-messages.js"></script> In your index.html page
Related
Hi I am new to angularjs. I am trying to do simple validation for required field as below.
<ng-form name="form" ng-submit="submit()">
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
<span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
</span>
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
<span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
</span>
</div>
<div class="button-container">
<input type="submit" value="Cancel" id="input-cancel">
<input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" ng-click="RegisterUser()" value="Submit" id="input-submit"/>
</div>
</ng-form>
When i click on submit my validation are not working. If i click on textbox and click outside validations are working. May I get some help here to fix this? Any help would be appreciated. Thank you.
I would also add novalidate attribute to the form like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<form novalidate name="form" ng-submit="submit()">
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
<span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
</span>
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
<span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
</span>
</div>
<div class="button-container">
<input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" value="Submit" id="input-submit"/>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Otherwise the browser takes over.
And code to go with it:
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.submit =function(){
$scope.RegisterUser();
}
})
I have an angular sign-up page. This is the directory structure of my project:
singUpPage-Angular
bin
bower_components
model
mongodbApp.js
node_modules
**partials
fail.html
main.html
success.html**
public
images
**javascripts
signUp.js**
stylesheets
routes
index.js
users.js
**views
index.ejs**
app.js
package.json
All my html is in partials folder
The javascript controller code is in signup.js
The main html is in views index.ejs.
I have tried to acces the html using the ui router and the code is not working. I am not sure if itis an error with the path or if there is a prolem with ui-router code.
The router does not take me to the page:
When I run the code: on the address bar I get: http://localhost:3000/#/partials/main.html: but nothing from the main page get displayed. I dont seem to get an errors either.
index.ejs
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/angular/angular.js"></script>
<script src="/ui-router/release/angular-ui-router.min.js"></script>
<script src="/javascripts/signUp.js"></script>
</head>
<body ng-controller="myCtrl">
<div ui-view></div>
</body>
</html>
signUp.js
angular.module("myApp",['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('partials/main.html');
$stateProvider
.state('success', {
url: "/success",
templateUrl:'partials/success.html'
})
.state('fail', {
url: '/fail',
templateUrl:'partials/fail.html'
})
})
.controller("myCtrl", function($scope, SignUp,$state){
$scope.clearPerson = function(){
$scope.first = "";
$scope.last = "";
$scope.email = "";
$scope.password = "";
$scope.confirm = "";
$scope.dob = "";
}
$scope.addPerson = function(){
/* console.log($scope.first);
console.log($scope.last);
console.log($scope.email);
console.log($scope.password);
console.log($scope.confirm);
console.log($scope.dob);*/
$scope.person = {
firstName: $scope.first,
lastName: $scope.last,
email: $scope.email,
password:$scope.password,
dateOfBirth: $scope.dob
}
console.log($scope.person);
SignUp.add($scope.person).success(function(res){
$state.go("success");
console.log(res);
}).error(function(res){
$state.go("fail");
console.log("error");
})
}
})
.factory("SignUp", function($http){
return{
add: function(person){
return $http.post('/signup',person);
}
}
})
main.html
<h1>Sign up Page</h1>
<div class="new-container">
<div class="container">
<h3>Create an ID</h3>
<form class="form-horizontal" name="signup" novalidate ng-submit="addPerson()">
<div class="form-group">
<h4>Name</h4>
<label class="col-sm-2 label-control align-text" >First Name</label>
<div class="col-sm-4 text-margin" >
<input name="first" ng-maxlength=50 ng-model="first" type="text" class="form-control" required>
<div class="error"
ng-show="signup.first.$dirty && signup.first.$invalid">
<small class="error"
ng-show="signup.first.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup.first.$error.maxlength">
Your name cannot be longer than 50 characters
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 label-control align-text" >Last Name</label>
<div class="col-sm-4 text-margin">
<input name="last" ng-maxlength=50 ng-model="last" type="text" class="form-control" placeholder="optional">
<div class="error"
ng-show="signup.last.$dirty && signup.last.$invalid">
<small class="error"
ng-show="signup.last.$error.maxlength">
Your name cannot be longer than 50 characters
</small>
</div>
</div>
</div>
<div class="form-group">
<h4>ID and Password</h4>
<label class="col-sm-2 align-text label-control">Username</label>
<div class="col-sm-4 text-margin">
<input name="email" ng-maxlength=56 ng-model="email" type="email" class="form-control" placeholder="Email" required>
<div class="error"
ng-show="signup.email.$dirty && signup.email.$invalid">
<small class="error"
ng-show="signup.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup.email.$error.maxlength">
Your name cannot be longer than 56 characters
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 label-control align-text">Password</label>
<div class="col-sm-4 text-margin">
<input name="password" ng-minlength=6 ng-model="password" type="password" class="form-control al" placeholder="Password" required>
<div class="error"
ng-show="signup.password.$dirty && signup.password.$invalid">
<small class="error"
ng-show="signup.password.$error.required">
Your password is required.
</small>
<small class="error"
ng-show="signup.password.$error.minlength">
Your name cannot be atleast 6 characters long.
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 label-control align-text">Confirm Password</label>
<div class="col-sm-4 text-margin">
<input name="confirm" compare-to="password" ng-model="confirm" type="password" class="form-control" placeholder="Password" required>
<div class="error"
ng-show="signup.confirm.$dirty && signup.confirm.$invalid">
<small class="error"
ng-show="signup.confirm.$error.required">
Password confirmation is required.
</small>
<small class="error"
ng-show="signup.confirm.$error.errorCompareTo">
Your passwords do not match.
</small>
</div>
</div>
</div>
<div class="form-group">
<h4>Date of Birth</h4>
<label class="col-sm-2 label-control align-text">Birthday</label>
<div class="col-sm-4 text-margin">
<input ng-model="dob" type="date" class="form-control" placeholder="MM/DD/YYYY" required>
</div>
</div>
<div class="form-group" >
<div class="col-sm-offset-2 col-sm-10 float-right" >
<button type="submit" class="btn signUp" >Sign Up</button>
<button type="submit" class="btn btn-default" ng-click="clearPerson()">Clear</button>
</div>
</div>
</form>
</div>
</div>
fail.html
<h1>fail</h1>
success.html
<h1>success</h1>
Do this
$urlRouterProvider.otherwise('/');
In State
$stateProvider
.state('main', {
url: "/",
templateUrl:'partials/main.html'
})
This will open your signUpPage
THE SITUATION:
I am using ng-messages directive for instant validation in my angular app. Everything is working fine except one thing: i need to validate the field 'password confirmation' and don't know how to do.
THE CODE:
<form name="autentication_form" novalidate="" ng-submit="submit_register()">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" name="email" ng-model="registerData.email" required>
<div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
<div class="form-error" ng-message="required">You did not enter the email</div>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="password" ng-model="registerData.password" required>
<div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
<div class="form-error" ng-message="required">Please enter the password</div>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password confirmation</span>
<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>
<div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
<div class="form-error" ng-message="required">Password confirmation required</div>
</div>
</label>
</form>
THE QUESTION:
How can i check that the password confirmation match using ng-messages?
The easiest approach is to use a pattern. Works fine for me!
<input type="password" name="new_password1" ng-model="new_password1">
<input type="password" name="new_password2" ng-pattern="\b{{new_password1}}\b" ng-model="new_password2">
<div ng-messages="passwordForm.new_password2.$error">
<div ng-message="pattern">Not equal!!!</div>
</div>
The best approach is to use a directive. The major point of problem here is that both password and password confirmation inputs need to be watched.
Here's the solution that could help
angular.module('app', ['ngMessages'])
.controller('ctrl', function($scope) {
$scope.registerData = {};
})
.directive('confirmPwd', function($interpolate, $parse) {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModelCtrl) {
var pwdToMatch = $parse(attr.confirmPwd);
var pwdFn = $interpolate(attr.confirmPwd)(scope);
scope.$watch(pwdFn, function(newVal) {
ngModelCtrl.$setValidity('password', ngModelCtrl.$viewValue == newVal);
})
ngModelCtrl.$validators.password = function(modelValue, viewValue) {
var value = modelValue || viewValue;
return value == pwdToMatch(scope);
};
}
}
});
<html ng-app="app">
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-messages#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<form name="autentication_form" novalidate="" ng-submit="submit_register()">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" name="email" ng-model="registerData.email" required="" />
<div class="form-errors" ng-messages="autentication_form.email.$error" ng-if='autentication_form.email.$touched'>
<span class="form-error" ng-message="required">You did not enter the email</span>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="password" ng-model="registerData.password" required />
<div class="form-errors" ng-messages="autentication_form.password.$error" ng-if='autentication_form.password.$touched'>
<span class="form-error" ng-message="required">Please enter the password</span>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password confirmation</span>
<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required="" confirm-pwd="registerData.password" />
<div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" ng-if='autentication_form.password_confirmation.$touched'>
<span class="form-error" ng-message="required">Password confirmation required</span>
<span class="form-error" ng-message="password">Password different</span>
</div>
</label>
</form>
</body>
</html>
When developing, you can face the fact that you need to create your own checks, which will affect the validity of the form. If these checks are simple, such as a comparison of the two values, it is better to use a general guideline, than write your own checks for each situation. Look at use-form-error directive.
Live example on jsfiddle.
angular.module('ExampleApp', ['use', 'ngMessages'])
.controller('ExampleController', function($scope) {
});
.errors {
color: maroon
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<form name="ExampleForm">
<label>Password</label>
<input ng-model="password" required />
<br>
<label>Confirm password</label>
<input ng-model="confirmPassword" name="confirmPassword" use-form-error="isNotSame" use-error-expression="password && confirmPassword && password!=confirmPassword" required />
<div ng-show="ExampleForm.$error.isNotSame" class="errors">Passwords Do Not Match!</div>
<div ng-messages="ExampleForm.confirmPassword.$error" class="errors">
<div ng-message="isNotSame">
Passwords Do Not Match (from ng-message)!
</div>
</div>
</form>
</div>
</div>
Here's what I did (using ng-pattern):
<md-input-container class="md-block">
<label>New Password</label>
<input ng-model="user.password" name="password" type="password" required ng-pattern="'.{8,}'" />
<div ng-messages="form.password.$error">
<div ng-message="required">Password required.</div>
<div ng-message="pattern">Password must be at least 8 characters.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Confirm Password</label>
<input ng-model="user.confirmPassword" name="confirmPassword" type="password" ng-pattern="user.password|escapeRegex" required />
<div ng-messages="form.confirmPassword.$error">
<div ng-message="required">Password confirmation required.</div>
<div ng-message="pattern">Passwords do not match.</div>
</div>
</md-input-container>
And the following filter converts the ng-pattern regex to a literal:
module.filter('escapeRegex', function(){
return function(str){
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
});
ngMessage works by adding $error.message_field_name to the DOM field name in the form object (within the scope of course). So if your DOM form name is autentication_form and the DOM field name is password_confirmation, you need to set $scope.autentication_form.password_confirmation.$error.nomatch (or whatever ngMessage name you want) to true to display the "Doesn't match" error.
Markup:
<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required />
<div ng-messages="autentication_form.password_confirmation.$error">
<div ng-message="required">Please repeat your password.</div>
<div ng-message="nomatch">Doesn't match.</div>
</div>
</div>
Code, nothing special, just watching both passwords:
$scope.$watch("registerData.password + registerData.password_confirmation", function () {
$scope.autentication_form.password_confirmation.$error.nomatch = $scope.registerData.password !== $scope.registerData.password_confirmation;
});
i did using only ionic(html) validations.
New Password
New Password is required
<label class="item item-input inputRadius">
<span class="input-label">Confirm Password</span>
<input type="password" placeholder="Confirm Password" ng-model="passwordUpdateInfo.confirmPassword" name="confirmPassword" required>
</label>
<div ng-show="passwordUpdateForm.$submitted || passwordUpdateForm.confirmPassword.$touched">
<div ng-show="passwordUpdateForm.confirmPassword.$error.required" class="errorMessage">Confirm Password is required</div>
</div>
<div ng-show="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">
Password not match..(amar from india)
</div>
<button class="button button-positive button-block" ng-disabled="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">Update</button>
I'm pretty new to AngularJS and trying to build a contact form. I did some research to validate with angular, this works fine. However sending the input to my email account is still a mystery.
HTML Snippet
<form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
<p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
<p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
</div>
<!-- TEL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
<input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
<p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
</div>
<!-- TEXT -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
<textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
<p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">
<!-- <pre>
{{formData}}
</pre> -->
</form>
Controller
.controller('MainCtrl', function($scope, $http) {
this.features = keys;
$scope.submitForm = function(isValid) {
if (isValid) {
$scope.formData = {};
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
}
};
})
The process.php file is still empty since I'm not quite sure what to put here.
Regarding your form submission setup, you cannot put the ng-submit on any input[type="submit"] elements, instead you put ng-click. Also, according to the angular docs, when you have a ng-submit on the form, and an ng-click on any input[type="submit"] elements, the ng-click handlers will get called first, THEN the ng-submit handler will get called (your controller is set up for the opposite order).
But in your case, two submit handlers is unneccessary, as you can do all your validation with angular directives, and just use an ng-click. Theres an example plunker here.
HTML:
<div ng-controller="MainCtrl">
<form name="contactForm" novalidate>
<!-- NAME -->
<div ng-class="{'form-error':contactForm.name.$dirty && contactForm.name.$invalid, 'form-group':true}">
<input type="text" name="name" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required="" />
<div ng-messages="contactForm.name.$error" ng-show="contactForm.name.$dirty" >
<div ng-message="minlength">Name too short</div>
<div ng-message="required">Required Name</div>
</div>
</div>
<!-- EMAIL -->
<div ng-class="{'form-error':contactForm.email.$dirty && contactForm.email.$invalid, 'form-group':true}">
<input type="email" name="email" ng-model="formData.email" placeholder="Email adres" required />
<div ng-messages="contactForm.email.$error" ng-show="contactForm.email.$dirty">
<div ng-message="email">Invalid Email</div>
<div ng-message="required">Required Email</div>
</div>
</div>
<!-- TEL -->
<div ng-class="{'form-error':contactForm.tel.$dirty && contactForm.tel.$invalid, 'form-group':true}">
<input type="text" name="tel" ng-pattern=/\d{3}-\d{3}-\d{4}/ ng-model="formData.tel" placeholder="Telefoonnummer" required />
<div ng-messages="contactForm.tel.$error" ng-show="contactForm.tel.$dirty">
<div ng-message="pattern">Valid form: XXX-XXX-XXXX</div>
<div ng-message="required">Required Phone</div>
</div>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-click="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak" />
</form>
</div>
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.formData = {};
$scope.processForm = function() {
alert('valid form!')
$http({
method : 'POST',
url : 'process.php',
data : $scope.formData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
});
Regarding the submission to your email, the $http service will post your data using the http protocol, so you cannot send it directly to you email, as email does not use the HTTP protocol for communication. You Could send the post data to your server, and have the server send the email (e.g. if you use Node you can use nodemailer package to send the email).
Just copy below code in your angularJs Project it will work fine
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row" style="margin-bottom:15px;">
<div class="col-md-12">
<div class="col-md-offset-1 col-md-6" id="box">
<h2 class="colr">Contact Us!</h2>
<hr>
<form class="form-horizontal" name="contactForm" ng-submit="submitContactForm(ContactDetails)" novalidate>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.first_name.$invalid && !contactForm.first_name.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="Name" ng-model="ContactDetails.FirstName" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.first_name.$invalid && !contactForm.first_name.$pristine" class="help-block">Username is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" ng-model="ContactDetails.Email" class="form-control" type="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/">
</div>
<span ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block"> Enter a valid email.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.phone.$invalid && !contactForm.phone.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" ng-model="ContactDetails.PhoneNumber" name="phone" ng-maxlength="10" ng-minlength="10" placeholder="9845640899" required>
</div>
<span ng-show="contactForm.phone.$invalid && !contactForm.phone.$pristine">Phone Number is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.subject.$invalid && !contactForm.subject.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" ng-model="ContactDetails.Subject" placeholder="Enter Subject" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.subject.$invalid && !contactForm.subject.$pristine" class="help-block">Subject is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.comment.$invalid && !contactForm.comment.$pristine }">
<div class="col-md-12 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" ng-model="ContactDetails.Comment" rows="6" name="comment" placeholder="Message" ng-maxlength="255" ng-minlength="10" required></textarea>
</div>
<span ng-show="contactForm.comment.$invalid && !contactForm.comment.$pristine" class="help-block"> Enter a Message.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-warning pull-right" ng-disabled="contactForm.$invalid">Send<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
I am trying to display one piece of form data, the username, on the right side of the same page the form is present in (without page refresh). I want this to happen as soon as I hit submit. For this miniapp, there is no backend (not even local storage).
The following is the markup for the right-side of the page:
The userArray is defined on the scope and has the usernames pushed into it.
<div class="index-right">
<p ng-repeat="user in userArray">
{{ user }}
</p>
</div>
This is my main module and controller:
var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
app.controller('MainCtrl', function($scope){
$scope.userArray = [];
console.log($scope.userArray);
$scope.submitForm = function(isValid){
if(isValid){
$scope.userArray.push($scope.formData.username);
}
console.log($scope.userArray);
};
});
Currently, the usernames aren't showing up on the front page. Although, they are being pushed into the userArray (I am consoling out the array on the browser). Any help on how to proceed would be greatly appreciated.
I am adding the whole index.html here:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="practichemApp">
<header class="index-header"><h1>Registration Page</h1></header>
<hr>
<div class="index-left" ng-controller="MainCtrl">
<form id="index-form" name="practichemForm" ng-submit="submitForm(practichemForm.$valid)" novalidate>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.username.$invalid && !practichemForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="formData.username" ng-minlength="3" ng-maxlength="20" required>
<p ng-show="practichemForm.username.$invalid && !practichemForm.username.$pristine" class="help-block">Username is required</p>
<p ng-show="practichemForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="practichemForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.email.$invalid && !practichemForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="formData.email" required>
<p ng-show="practichemForm.email.$invalid && !practichemForm.email.$pristine" class="help-block">Please Enter a valid email.</p>
</div>
<!-- PASSWORD -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.password.$invalid && !practichemForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/" required>
<p ng-show="practichemForm.password.$error.minlength" class="help-block">Password needs to be at least 8 characters long.</p>
<p ng-show="practichemForm.password.$error.maxlength" class="help-block">Password is too long.</p>
<p ng-show="practichemForm.password.$error.pattern" class="help-block">Password needs at least one integer, one lowercase letter and one uppercase letter.</p>
</div>
<!-- PASSWORD CONFIRMATION -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.passwordConfirm.$error.required && !practichemForm.passwordConfirm.$pristine }">
<label>Password (confirmation)</label>
<input type="password" name="passwordConfirm" class="form-control" ng-model="formData.passwordConfirm" ui-validate="'$value == formData.password'" ui-validate-watch="'formData.password'" ng-minlength="8" ng-maxlength="20" required/>
<p ng-show="practichemForm.passwordConfirm.$error.ui-validate && practichemForm.passwordConfirm.$dirty && practichemForm.passwordConfirm.$error.required">Passwords don't match.</p>
</div>
<br><br>
<button type="submit" class="btn btn-danger" ng-disabled="practichemForm.$invalid">Submit</button>
</form>
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-utils/validate.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your element that you want to use to show your data it outside of the scope of the place that has the data.
<div class="index-left" ng-controller="MainCtrl">
...
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
You can use a service to share the information, or put the userArray on a higher scope (like $rootScope, or move the ng-controller to a element that wraps both.
$rootScope being the easiest.. try this:
<div class="index-left" ng-controller="MainCtrl">
...
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ $root.user }}
</div>
var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
app.controller('MainCtrl', function($scope, $rootScope){
$rootScope.userArray = [];
console.log($rootScope.userArray);
$scope.submitForm = function(isValid){
if(isValid){
$rootScope.userArray.push($scope.formData.username);
}
console.log($rootScope.userArray);
};
});
You have your ng-repeat out of the controller scope
I created a plunker for you example (removed some fields for simplicity)
http://plnkr.co/edit/7skU1lBIU5Gy7bJ0Htgh?p=preview
Moved this inside so that it is under mainctrl's
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>