i know have many result in this question but no one give work answer for me.
html 1:
<button class="basebtn logbtn" ng-click="openlog()">LOGIN</button>
<button class="basebtn regbtn" ng-click="openreg()">SIGN UP</button>
html 2:
<div ng-controller="main">
<center><img class="img-login" ng-src="../images/form-logo.png"/></center>
<form class="login" name="log" ng-submit="login()" novalidate>
<div class="form-group login-form" ng-class="{'has-error' : isInvalid(log.email) ,'has-success' : isValid(log.email)}">
<input type="email" class="form-control" name="email" ng-model="user.email" required placeholder="Email">
<div class="alert alert-danger" role="alert" ng-show="isInvalid(log.email)">Enter valid email</div>
</div>
<div class="form-group login-form" ng-class="{'has-error' : isInvalid(log.password) ,'has-success' : isValid(log.password)}">
<input type="password" class="form-control" name="password" ng-model="user.password" required placeholder="Password">
<div class="alert alert-danger" role="alert" ng-show="isInvalid(log.password)">This Feild is required</div>
</div>
<div class="form-group" style="text-align:center;">
<input type="submit" class="logbnt" value="LOGIN" ng-disabled="! log.$valid" data-dismiss='modal'/>
</div>
</form>
angular :
$scope.login = function(){
$http.post("www.example.com/login",$scope.user).then(function(res){
localStorage.setItem("token",res.data.token);
//how i close the modal ???
});
}
//here create the modal
$scope.openlog = function () {
$scope.$modalInstance = $uibModal.open({
templateUrl:"login.html",
});
}
that my code , how i close in $http result the modal ?
You can do this,
$scope.login = function(){
$http.post("www.example.com/login",$scope.user).then(function(res){
localStorage.setItem("token",res.data.token);
$modalInstance.dismiss('cancel');
});
};
Related
I want to display an error using angularjs, under the "confirm password" input which should say "Passwords don't match".
<form name="settingsForm" ng-submit="vm.login(vm.credentials)" novalidate>
<md-input-container class="md-block" flex-gt-sm="">
<label translate="MY_PROFILE_NEW_PASSWORD"></label>
<input type="password" name="newPassword" id="password"
ng-model="vm.newPassword"
required=""
ng-minlength="8"
md-maxlength="40">
<div ng-messages="settingsForm.newPassword.$error"
role="alert"
multiple="">
<div ng-message="required"
class="my-message"
translate="LOGIN_PASSWORD_INVALID">
</div>
<div ng-message="minlength"
class="my-message"
translate="MIN_8_CHARS">
</div>
</div>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="">
<label translate="MY_PROFILE_CONFIRM_NEW_PASSWORD"></label>
<input type="password"
name="confirmPassword"
id="confirmPassword"
ng-model="vm.confirmPassword"
required=""
confirm-password="vm.newPassword"
ng-minlength="8"
md-maxlength="40">
<div ng-messages="settingsForm.$error.confirmPassword"
role="alert" multiple="" >
<div ng-message="required"
class="my-message"
translate="LOGIN_PASSWORD_INVALID">
</div>
<div ng-message="minlength"
class="my-message"
translate="MIN_8_CHARS">
</div>
</div>
<div ng-message="required"
class="my-message"
translate="LOGIN_PASSWORD_INVALID">
</div>
<div ng-message="confirm-password"
class="my-message">
Passwords don't match.
</div>
</md-input-container>
<md-button class="md-raised md-primary btn-auth"
type="submit"
ng-disabled="settingsForm.$invalid"
translate="SUBMIT"
ng-click="vm.changePassword(vm)">
</md-button>
I need to make this form display error messages for each particular case.
I haven't found how "confirm-password" attribute should work for validation.
You have to create a Custom Directive. Try this.
<div data-ng-controller="PasswordController as vmPassword">
<form name="passwordForm">
<md-input-container class="md-block" flex-gt-sm>
<label>Password</label>
<input type="password"
name="password"
ng-model="vmPassword.password"
required
/>
<div ng-messages="passwordForm.password.$error" role="alert" class="form-errors first-name-error">
<div ng-message="required">Password is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Confirm Password</label>
<input type="password"
name="confirm_password"
ng-model="vmPassword.confirm_password"
required
compare-to="vmPassword.password"
/>
<div ng-messages="passwordForm.confirm_password.$error" role="alert" class="form-errors first-name-error">
<div ng-message="required">Password is required.</div>
<div ng-message="compareTo">Passwords do not match</div>
</div>
</md-input-container>
</form>
</div>
Custom Directive
(function () {
"use strict";
angular.module('app').directive('compareTo', compareTo);
compareTo.$inject = [];
function compareTo() {
return {
require: "ngModel",
scope: {
compareTolValue: "=compareTo"
},
link: function(scope, element, attributes, ngModel) {
ngModel.$validators.compareTo = function(modelValue) {
return modelValue == scope.compareTolValue;
};
scope.$watch("compareTolValue", function() {
ngModel.$validate();
});
}
};
}
})();
Goodluck .! :)
Demo here - http://embed.plnkr.co/UK4G4Lm5BCNNe5SWoA9r/
I am trying to do form validation using AngularJS in Laravel Blade, but it isn't working and when clicked on the submit button undefined gets printed in the console.
HTML:
<div class="uk-grid" ng-app="validationApp" ng-controller="mainController">
<form name="signupForm" class="uk-form uk-width-1-2" novalidate>
{{ csrf_field() }}
<fieldset class="pad50">
<div class="uk-form-row">
<input class="bradius2" placeholder="Username" type="text" name="username" ng-modal="user.username" required>
<div ng-show="signupForm.$submitted || signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required">Username is required.</span>
</div>
</div>
<div class="uk-form-row">
<input class="bradius2" placeholder="Email" type="email" name="user_mail" ng-modal="user.user_mail" required>
<div ng-show="signupForm.$submitted || signupForm.user_mail.$touched">
<span ng-show="signupForm.user_mail.$error.required">Email is required.</span>
<span ng-show="signupForm.user_mail.$error.email">Enter a valid email.</span>
</div>
</div>
<div class="uk-form-row">
<input class="bradius2" placeholder="Password" type="password" name="user_pass" ng-modal="user.user_pass" required>
<div ng-show="signupForm.$submitted || signupForm.user_pass.$touched">
<span ng-show="signupForm.user_pass.$error.required">Password is required</span>
</div>
</div>
<div class="uk-form-row">
<input class="bradius2" placeholder="Confirm Password" type="password" name="user_cpass" ng-modal="user.user_cpass" required>
<div ng-show="signupForm.$submitted || signupForm.user_cpass.$touched">
<span ng-show="signupForm.user_cpass.$error.required">Confirm the password</span>
</div>
</div>
<div class="uk-form-row">
<button class="uk-button bgorange butn uk-button-large" type="submit" id="sign_up_button" ng-click="signupUser(user)">
<b>SIGN UP VIA EMAIL</b>
</button>
</div>
</fieldset>
</form>
</div>
app.js:
angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.master = {};
$scope.signupUser = function(user) {
$scope.master = angular.copy(user);
console.log(user);
};
}]);
I am using Angular version 1.6.1 and also UIKit.
Thanks in advance!
It has to be ng-model instead of ng-modal.
ng-model is the one which stores the user input in form.
undefined gets printed in the console
you need to initialize the user object
angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.master = {};
$scope.user = {};// here
$scope.signupUser = function(user) {
$scope.master = angular.copy(user);
console.log(user);
};
}]);
Form Validation not working AngularJS
You should add this code on your form tag
ng-submit="mainForm.$valid && yourfunction()" //yourfunction means which event you want to be fire
notice ng-messages:
<div class="uk-form-row" >
<input class="bradius2" placeholder="Username" type="text" name="username" ng-model="user.username" required>
<div ng-messages="signupForm.username.$error" ng-show="signupForm.$submitted || signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required">Username is required.</span>
</div>
</div>
I want to show the required error message once the from is submitted but not sure how to do it i am trying as shown below
<div class="controls">
<form name="formx" >
<ul class="form small">
<div class="tag">ID</div>
<input type="text" class="small" name="enrolmentId" ng-model="enrolmentDetail.Id" required="" onkeypress='return !(event.charCode == 32 )'>
<div class="error text-danger" style="position: absolute;margin-left: 120px;" ng-show="formx.enrolmentId.$error.required && (formx.$submitted || formx.enrolmentId.$touched)"><p>Id is required</p></div>
</li>
<li>
<div class="btn" ng-click="saveDetails(enrolmentDetail)" ng-show="formAction=='save'">SAVE</div>
</li>
</ul>
</form>
</div>
here now the error message is shown once we dirty the textbox but i want to show the error message once the form is submitted and if there is required error from should not be submitted
trying used ng-submit but not sure how to do it
Please help by creating a fiddle or posting a example to do it
This is an example
html
<body ng-app="myApp">
<div ng-controller="myCtrl as mc">
<form class="form" name="myForm" ng-submit="mc.submit(myForm)" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input name="username" class="form-control" type="text" ng-model="mc.username" required/>
<p class="text-danger" ng-show="myForm.username.$error.required && mc.submitted">Username is required</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" ng-model="mc.password" required/>
<p class="text-danger" ng-show="myForm.password.$error.required && mc.submitted">Password is required</p>
</div>
<button class="btn btn-success">submit</button>
</form>
<p class="text-success" ng-show="mc.sent && mc.submitted">Form sent</p>
js
angular.module("myApp",[])
.controller("myCtrl", function(){
var vm = this;
vm.submit = submit;
function submit(form){
vm.submitted = true;
if(form.$valid && vm.submitted === true){
//Send data logic
vm.sent = true;
}
}
I am trying to submit a simple contact form. The form is inside a bootstrap modal (don't think that makes any difference) but the controller is in a directive.
The html for the form is as followed:
<form name="contactForm" ng-submit="contactForm()" novalidate>
<div class="form-group">
<div class="col-lg-6 col-md-6 col-sm-6">
<input type="text" placeholder="Full name" name="name" ng-minlength="3" max="20"
ng-model="name" id="name" class="form-control">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<input type="email" ng-minlength="4" placeholder="Email address" name="contactEmail"
ng-model="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 col-md-12 col-sm-12">
<input type="text" ng-model="subject" name="subject" ng-minlength="10" id=""
placeholder="Subject" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 col-md-12 col-sm-12">
<textarea class="form-control" ng-model="message" name="message" ng-minlength="10"
placeholder="Your message"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="col-lg-12 col-md-12 col-sm-12">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</div>
</form>
Which i think is all good. The body of my controller looks like this
$rootScope.contactForm = contactForm();
function contactForm() {
console.log('triggered!');
var contactFormVars = {
name: $rootScope.name,
contactEmail: $rootScope.contactEmail,
subject: $rootScope.subject,
message: $rootScope.message
}
// With Promise
Stamplay.Object('contactform')
.save(contactFormVars)
.then(function(res) {
console.log('yes!');
}, function(err) {
console.log('No!');
})
}
return directive;
};
EDIT: Controller now looks like this:
function contactForm($rootScope,$stamplay,$q) {
$rootScope.data = {}
$rootScope.data = {
name: $rootScope.data.name,
contactemail: $rootScope.data.contactemail,
subject: $rootScope.data.subject,
message: $rootScope.data.message
}
Stamplay.Object("contactform")
.save($rootScope.data, function (err, res) {
console.log(res);
console.log(err);
// res is the new car object
});
}
When i click the submit button I get the following error which i've been Googling
Error: v2.contactForm is not a function. (In 'v2.contactForm()', 'v2.contactForm' is an instance of FormController)
fn
Any help with this is appreciated.
EDIT
Ok so now i've moved the js from a directive and placed it in to the main controller. At the moment its not making any difference, only that the error has changed very slightly:
angular.js:12722Error: v4.contactForm is not a function. (In 'v4.contactForm(ensureSafeObject(v5,text))', 'v4.contactForm' is an instance of FormController)
fn
Not sure what the difference between v2 and v4 is.
Any advice to get past this blocker is appreciated.
I am unable to get automatic radio button checked when I edit the User From using following Html and AngularJs Code. When I console {{changeUser}} this returns following data
{"id":1,"username":"Ramesh","password":"Ramesh1#23","role":"admin","active":"no"}. When I load the edit form I have to automatically checked the no radio button in the following code.
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal form-bordered" name="editUserForm" data-ng-submit="userEdit(changeUser)">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username*</label>
<div class="col-md-4">
<input class="form-control" type="text" name="userName" data-ng-model="changeUser.username" value="{{ changeUser.username }}" data-ng-pattern="/^[a-z0-9_ .-]{5,15}$/i" required />
<span style="color:red" class="error" data-ng-show="editUserForm.userName.$error.pattern" >Only letters, integers, and underscores.Minimum 5 characters to maximum 15 characters.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password*</label>
<div class="col-md-4">
<input class="form-control" type="password" name="changePassword" data-ng-model="changeUser.password" value="{{ changeUser.password}}" data-ng-pattern="usersPattern.password" required />
<span style="color:red" class="error" data-ng-show="editUserForm.changePassword.$error.pattern">Minimum of 8 characters, 1 capital letter,1 lowercase, 1 special-case and 1 numeric.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn purple" data-ng-disabled= "editUserForm.$invalid">
<i class="fa fa-check"></i> Edit</button>
<button type="button" class="btn red" data-ng-click="cancelEdit()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
The Controller is
(function (){
"use strict";
function UsersEditController($scope, UserFactory, $http, $location) {
$scope.$on('$viewContentLoaded', function () {
App.initAjax(); // initialize core components
});
$scope.changeUser = {};
$scope.changeUser = UserFactory.get();
$scope.userEdit = function(data) {
$scope.changeUser = data;
console.log($scope.changeUser);
};
$scope.usersPattern = {
password: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%]).{8,20})'
};
$scope.cancelEdit = function() {
$location.path('users');
};
}
UsersEditController.$inject = ['$scope', 'UserFactory', '$http', '$location'];
angular.module('books').controller('UsersEditController', UsersEditController);
})()
And I guess this is your answer (even without js code provided :) )
https://stackoverflow.com/a/18446612/552194
You need to add ng-value and use it instead of the standard value