Hello everybody I'm quite new to Angularjs and Bootstrap. Now I have made login form using Angularjs and Bootstrap css.
The below is my form
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" id="name" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" id="email" name="email" class="form-control" ng-model="user.email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<!-- PASSWORD -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Password</label>
<input type="password" id="pass" name="pass" class="form-control" ng-model="user.pass" ng-minlength="3" required>
<p ng-show="userForm.pass.$invalid && !userForm.pass.$pristine" class="help-block">Your pass is required.</p>
</div>
<button id="signIn_1" type="submit" class="btn btn-block signin">Submit</button>
</form>
and my app script is as
script>
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.email = "fsdg#sdf.com";
$scope.password = "1234";
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
};
});
</script>
Now my problem is how can i get above form input values after validation in angular app and send them to Codeigniter controller for authenticate.
Thanks in advance.
first declare
$scope.user={} in validation controller
In user object all value is available to you when user type because of ng-model
validationApp.controller('mainController', function($scope) {
$scope.email = "fsdg#sdf.com";
$scope.password = "1234";
$scope.user={};//Add this thing
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
$http.post('index.php',$scope.user).success(function(response){
});
};
});
// At server end
// Remember one thing $http send data in json format.So decode it by json_decode
Related
I have used the error form validation in the addnewstudent page as below and it's working fine.
<td>
<input limit-to="50" type="email" name="input" ng-model="Email" />
<span style="display:none">{{ emailValid = !!myForm.$error.email}}</span>
<span ng-class="customStyle.colorClass">
{{EmailValidation }}
</span>
</td>
Same approach I used for my edit page as like below, but Iam not able to get the bool value of "!!myForm.$error".
my Edit page
<td>
<input limit-to="50" type="text" ng-model="Student.email" />
<span style="display:none">{{ emailValid = !!myForm.$error.Student.email}}
</span>
<span>
{{EmailValidation }}
</span>
</td>
My JS,
$scope.save = function () {
if ($scope.emailValid || $scope.Student.email=='') {
$scope.EmailValidation = 'Not a valid email (ex: me#example.com)';
return;
}
else {
$scope.EmailValidation = '';
}
.......
.......
Where I did go wrong on my edit page?
To validate a form input in angularjs there should be name attribute for that input and form also.
angular.module('sampleApp', [])
.controller('myCtrl', function($scope) {
$scope.Student = {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="sampleApp" ng-controller="myCtrl" >
<form name="myForm" novalidate>
<input limit-to="50" type="email" ng-model="Student.email" name="email" required/>
<div ng-show="myForm.$submitted || myForm.email.$touched">
<span ng-show="myForm.email.$error.required">Tell us your email.</span>
<span ng-show="myForm.email.$error.email">This is not a valid email.</span>
</div>
<button>Submit</button>
</form>
</div>
Above code will check for non empty valid email, which is done by required,type="email" attributes.
I'm a newbie to angular, so I need a help.
In html, I wrote the following
<div class="form-group">
<input type="email" name="Email" id="LoginEmail class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
</div>
In angular, I write the following code
angular
.module("LoginForm", [])
.controller("processingLoginForm", ["$scope", function ($scope) {
$scope.userinfo = [
{name : "User1",
account : "user1#whatever.com",
city: "XYZ",
password: "Angular#2017"}
];
}]);
I need to compare the value of input box with the value of the script and show a message if it's not correct, so how can I do that?
Firstly you need to assign model to your template scope. Use ng-model for this purpose. Then you need a form to submit and trigger a function to check if user input matches to the desired values.
Add ng-model and wrap your inputs with a form tag:
<form ng-submit="login()">
<div class="form-group">
<input ng-model="email" type="email" name="Email" id="LoginEmail" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input ng-model="password" type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
Check if user input is valid in Controller:
$scope.login = function() {
const isUserValid = $scope.email === $scope.userinfo[0].account && $scope.password === $scope.userinfo[0].password;
if(isUserValid) {
alert("Logged In Successfully");
}else {
alert("Email or password incorrect. Try again.")
}
}
Here's a working example of the above code.
In your input elements you miss the ng-model attribute. It is used to bind the values with your scope variables.
<input type="email" ... ng-model="email" ...>
<input type="password" ... ng-model="password" ...>
And in your controller you can write
if($scope.email == $scope.userinfo[0].account && $scope.password == $scope.userinfo[0].password){
//Login ok
}else{
//Login failed
}
Assuming there is a form element somewhere above
Add ng-submit to it
<form ng-submit="submit()">
Add ng-model to the form elements.
I have added state.email and state.password
<div class="form-group">
<input ng-model="state.email" type="email" name="Email" id="LoginEmail" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input ng-model="state.password" type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
</div>
Compare the binding values to the values in $scope.userinfo
angular
.module("LoginForm", [])
.controller("processingLoginForm", ["$scope", function ($scope) {
$scope.userinfo = [{
name : "User1",
account : "user1#whatever.com",
city: "XYZ",
password: "Angular#2017"
}];
// when you submit the form, this function will be called
$scope.submit = function (e) {
e.preventDefault();
if ($scope.state.email !== $scope.userinfo[0].account || $scope.state.password !== $scope.userinfo[0].password) {
// did not match
} else {
// matched
}
}
}]);
I am not able to see error message on clicking the submit button using angularjs.
Any lead will be appreciated
Thanks in advance :)
<form id="formbody" ng-submit="submituser(form)" name="form" novalidate>
<input type="text" ng-class="{ errorinput: submitted && form.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
<div style="padding-left: 275px;">
<button type="submit">Submit</button>
<!-- <div type="button" id="btn" style="color: red;" >Submit</div> -->
</div>
</div>
</form>
.controller('ExampleController', function($scope, $location, $scope, $stateParams) {
$scope.singleSelect = '';
$scope.goToPage = function() {
console.log("selectservice");
$location.path("/selectservice");
}
$scope.submituser = function($scope) {
if ($scope.form.$valid) {} else {
$scope.submitted = true;
}
}
})
change ng-show of span to
<span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
please check the form name
you have used two different names
name ="form" in form tag and used as signUpForm.dob in input field.
Check your ng-model to
<form id="formbody" ng-submit="submituser(form)" name="signUpForm" novalidate>
<input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="form.dob" placeholder="Date of Birth" required />
<span class="e" ng-if="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<div style="padding-left: 275px;">
<button type="submit">Submit</button>
</div>
</div>
</form>
.controller('ExampleController',function($scope,$location,$scope, $stateParams){
$scope.singleSelect='';
$scope.goToPage=function(){
console.log("selectservice");
$location.path("/selectservice");
}
$scope.submitted =false;
$scope.submituser = function(form){
// console.log(form);
if (form.$valid) {
your logic
} else {
$scope.submitted = true;
}
}
})
Try something like that
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.dob.$invalid]">
<label class="control-label" for="dob">Your Date of Birth</label>
<div class="controls">
<input type="text" name="dob" ng-model="dob" required />
<span class="help-inline" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
You have to provide the form name but even after that you cannot refer to your form in controller unless you pass it through the submit function arguments. Also there is not signupForm() function in your controller.
The way to go is :
<form id="formbody" name="myForm" ng-submit="signupForm(myForm)" novalidate>
<!-- inputs etc -->
</form>
Then based on submituser():
$scope.signupForm = function(myForm) {
//Do whatever you want to do
if(myForm.$valid) {
//some logic
}else {
$scope.submitted = true;
}
}
On the other hand if you don't want to mess up with the controller you can always use FormController method $submitted. This would look like:
<span class="e" ng-show="myForm.$submitted && myForm.dob.$invalid">Please provide a valid date of birth</span>
I´ve a simple 3 pages html. Index, contact and services. I call the templates views html with ng-view. All is fine. I see them with buttons navbar.
In contact.html, I want use the phpmailer and tutorial from "http://www.chaosm.net/blog/2014/05/21/angularjs-contact-form-with-bootstrap-and-phpmailer/".
In my controller, I paste the code JS in new controller, and in my html file the same form fron tutorial. After differents tests, I reach the controller working but when I pulse the input submit:nothing happen and doesn´t send anything.
I change the path relative to my exampledomain.net/js/contact-form.php in the code controller. Change so in contact-form the path for the call to PHPMailerAutoload.php.
In the contactform.html, I put in first div the call to controller ) and same form example.
In contact-form.php all is the same like the tutorial, only I change the path like I write before).
Is posible the post form doesn´t work because I use ng-view? Someone have 1 idea why contact-form.php seem not running?
I´m very beginner in Angular JS. thanks
The code of the unique controller I have (for routing and form phpmailer):
//Creo modulo y su nbre + establecer function routage
var AppSol = angular.module('AppSol', ['ngRoute']);
//Configure routage
AppSol.config(function($routeProvider){
$routeProvider
//Indico links pages nav
.when ('/',{
templateUrl:'templates/home.html',
controller:''
})
.otherwise ({
redirectTo:"/"
})
.when ('/Inicio',{
templateUrl:'templates/home.html',
controller:'MainCtrl'
})
.when ('/Contacto',{
templateUrl:'templates/contacto.html',
controller:'ContactController'
})
.when ('/Servicios',{
templateUrl:'templates/servicios.html',
controller:'ServCtrl'
});
});
//Creo controller and lo injecto
AppSol.controller ('MainCtrl', function($scope){
//Probar que funciona con mensaje
$scope.titulo="MY TITLE";
});
//Creo controller and lo injecto
AppSol.controller ('ServCtrl', function($scope){
//Probar que funciona con mensaje
$scope.message='';
$scope.titulo='SECOND TITLE'
});
//Creo controller and lo injecto
AppSol.controller ('ContactController', function ($scope, $http) {
$scope.titulo='TEST1 CALL CONTACT CONTROLLER'
//$scope.result = 'Hidden'
$scope.resultMessage='Test2 with Result control - I see this mensaje.';
$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(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
$http({
method : 'POST',
url : 'http://exampledomain.net/test/js/contact-form.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 :( Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});
Of course:
<div class="jumbotron" ng-app="AppSol">
<div class="container">
<div id="corte"></div>
<div class="vertical-middle">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Contact Form</h2> <strong>{{titulo}} for test controller form</strong>
</div>
<div ng-controller="ContactController" class="panel-body">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<label for="inputName" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
<label for="inputSubject" class="col-lg-2 control-label">Subject</label>
<div class="col-lg-10">
<input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<label for="inputMessage" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
</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>
</div>
</div>
</div>
View is ok, so you can add error to your $http promise, and see what is the server response.
I'm using angularjs frontend and Play framework backend to process posted data.
The challenge i'm facing is that the form is not resetting after successful posting of data I click submit.
My View is as below and is as below.
<form name="signupForm" ng-submit="signup()" novalidate>
<div>
<label for="email">Email</label>
<input name="email" class="form-control" type="email" id="email" placeholder="Email"
ng-model="email">
</div>
<div>
<label for="password">Password</label>
<input name="password" class="form-control" type="password" id="password"
placeholder="Password" ng-model="password">
</div>
<button type="submit" class="btn btn-primary">Sign up!</button>
</form>
My Angular controller is as below
angular.module('clientApp')
.controller('SignupCtrl', function ($scope, $http, $log) {
$scope.signup = function() {
var payload = {
email : $scope.email,
password : $scope.password
};
$http.post('app/signup', payload)
.success(function(data) {
$log.debug(data);
});
};
});
I'm using chrome browser. How do i get to clear the email and password fields after clicking submit?
Set the $scope.email and $scope.password to null like
$http.post('app/signup', payload)
.success(function(data) {
$log.debug(data);
$scope.email = null;
$scope.password = null;
$scope.signupForm.$setPristine(); //Set form to pristine mode
});