Can someone please tell me why my validations are not working. I followed many blogs and can't seem to debug it on my own.
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" placeholder="email" required/>
<input type="password" name="password" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
http://jsfiddle.net/xFnx8/3/
In order for Angular to track changes on form inputs, they need to be defined as ng-model properties on the scope.
So, your demo will work if you add the appropriate ng-model attributes:
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" ng-model="email" placeholder="email" required/>
<input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
Here is a working fiddle.
http://jsfiddle.net/6DzR5/
Yo, I fixed your fiddle.
You need to add your inputs as ng-model:
<input type="email" name="email" placeholder="email" data-ng-model="email" data-ng-required="true"/>
<input type="password" name="password" placeholder="password" data-ng-model="password" data-ng-required="true"/>
You must add an ng-model to your inputs so the form validation of angular can kick in.
Javascript
var testapp = angular.module('testapp', []);
var testCtrl = function ($scope) {
$scope.name = 'validation';
$scope.user = {};
};
HTML modification
<input type="email" name="email" placeholder="email" ng-model='user.email' required/>
<input type="password" name="password" placeholder="password" ng-model='user.password' required/>
Working demo
Related
I have this at the top of my HTML file:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
var app= angular.module("app",[]);
app.config(function($interpolateProvider){
$interpolateProvider.startSymbol("[[[");
$interpolateProvider.endSymbol("]]]");
});
app.controller("MainCtrl",function($scope){
$scope.name= "World";
})
</script>
I have two input elements.
<input id="id_password1" name="password1" ng-model="pw" placeholder="Password" type="password" required="">
and
<input id="id_password2" name="password2" ng-model="pw" placeholder="Confirm password" type="password" required="">
As I type my password into the first input, I'd like to fill the second with what I'm typing in the first. How do I do this?
Edit: These inputs are in a form made with Django.
In my forms.py, I have this.
class RegisterForm(UserCreationForm):
'''
Form that makes user using just email as username
'''
username= forms.EmailField(label=_("Email"), widget=forms.TextInput(attrs={"placeholder":"Email", "id":"id_register_username"}))
password1= forms.CharField(label=_("Password"), widget=forms.PasswordInput(attrs={"placeholder":"Password", "ng-model":"pw"}))
password2= forms.CharField(label=_("Password confirmation"), widget=forms.PasswordInput(attrs={"placeholder":"Confirm password", "ng-model":"pw"}))
What you want will work by ng-model with same name, but it's not confirm password!
However, i add 2 sample for your question:
sample 1: 2 same ng-model
var app = angular.module("app", [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<input name="password1" ng-model="password" type="password">
<input name="password2" ng-model="password" type="password">
</div>
sample 2: 2 different ng-model
var app = angular.module("app", [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<input name="password1" ng-model="password" type="password" ng-change="confirmPassword = password">
password is: {{password}}
<input name="password2" ng-model="confirmPassword" type="password">
confirmPassword is: {{confirmPassword}}
</div>
Fill free to ask question.
var mirrorInput = function() {
var input1 = document.getElementById("id_password1");
var input2 = document.getElementById("id_password2");
input1.addEventListener("keyup", function() {
input2.value = input1.value;
})
};
window.onload = function() {
mirrorInput();
};
<input id="id_password1" name="password1" ng-model="pw" placeholder="Password" type="password" required="">
<input id="id_password2" name="password2" ng-model="pw" placeholder="Confirm password" type="password" required="">
I can't understand how to push object into an array I tried few different ways and still can't figured it out.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
$scope.userInfo.push($scope.users)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
at click of add button I push the users information in userInfo properities. I works on first time but If I modified the the value already stored value also modified(after push value is modifying).
try angular.copy, this will copy the exist object with a new instance.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
var user = angular.copy($scope.users);
$scope.userInfo.push(user);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
You need to empty yours users before setting it to new values:
$scope.userInfo = [];
$scope.pushInArray = function(data) {
$scope.userInfo.push(data)
$scope.users = null;
}
HTML:
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
Here is the working Plnkr
You need to pass the object to the scope function to persist it.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function(data) {
var entry = (JSON.parse(JSON.stringify(data)));
$scope.userInfo.push(entry);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
</div>
I am working on SPA and I include HTML pages into one basic page by ng-include.Let's call this basic page as external and the included pages as internal.In an internal page I have set an input attribute to be ng-model="userd.Username" and in the external page i would like to get the value of this input.
In some internal page register.html there is the following code:
<div class="form-group">
<div class="form-group">
<span class="regForm text-danger">*</span> <input
ng-model="userd.Username" type="text" maxlength="10"
placeholder="Enter your name" class="form-control input-md"
required />
</div>
<div class="form-group">
<span class="regForm text-danger">*</span> <input
ng-model="userd.Password" type="password" maxlength="8"
placeholder="Enter your password" class="form-control input-md"
required />
</div>
<div class="form-group">
<span class="regForm text-danger">*</span><input
ng-model="userd.Nickname" type="text" maxlength="20"
placeholder="Enter your nickname" class="form-control input-md"
required />
</div>
<div class="form-group">
<input ng-model="userd.Description" type="text" maxlength="50"
placeholder="Enter description about you"
class="form-control input-md" />
</div>
<div class="form-group">
<input ng-model="userd.Photo" type="text"
placeholder="Enter photo URL" class="form-control input-md" />
</div>
<div class="form-group">
<button ng-click="registerBtn()" class="btn btn-primary">Register</button>
</div>
</div>
In the external page:
<div ng-include="'register.html'" ng-controller="registerCon" ng-show="logreg"></div>
I've tried to use the $rootscope as following in the main controller of the external page:
var appvar = angular.module('myApp', []);
//The Main Controller of the page (single web page)
appvar.controller('myCtrl',['$scope','$http','$rootScope',function($scope, $http,$rootScope) {
$rootScope.storedsession="";
}]);
And in the controller 'registerCon' I wrote:
appvar.controller('registerCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope) {
$scope.registerBtn = function() {
console.log(this.userd);
$http.post("http://localhost:8080/ExampleServletv3/registeruser",this.userd)
.success(function(response) {
console.log(response);
setTimeout(function () {
$scope.$apply(function(){
$rootScope.storedsession=this.userd.Username;
console.log($rootScope.storedsession);
});
});
});
};
}]);
but it prints undefined for console.log($rootScope.storedsession); in the console,I also tried $scope instead of $rootScope but it didn't work too.
Can someone help me please?
Thanks
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'd like to use ng-model on input that receive a value of an other input ...
My code doesn't work and I don't understand why, is that possible to set ng-model to an input with Angular values?
My code
var BottomApp = angular.module('BottomApp', []);
BottomApp.controller('SeoArticle', ['$scope', function($scope) {
$scope.seoTitle = document.getElementById('title').value;
$scope.createSeoUrl = function(string){
var string;
string = string.replace(/'+/g, '');
string = string.replace(/"+/g, '');
return string.replace(/\s+/g, '-');
};
}]);
<div ng-controller="SeoArticle">
<input type="text" id="title" name="article[title]" class="form-control" placeholder="title" ng-model="seoTitle">
<input type="text" name="article[seo_title]" value="{{seoTitle2}}">
<input type="text" name="article[seo_url]" value="{{seoUrl2}}">
<div class="ui-block-title"><h5>{{seoTitle}}</h5></div>
<input type="text" id="title" class="form-control" placeholder="title" value="{{seoTitle}}" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" value="{{createSeoUrl(seoTitle)}}" ng-model="seoUrl2">
<div class="panel">
<div class="seo-overview">
<p class="seo-overview-title">{{seoTitle}}</p>
<p class="seo-overview-url">{{createSeoUrl(seoTitle)}}</p>
</div>
</div>
</div>
:
Here's a working Plunker.
I have added the ng-app call to the body tag
<body ng-app="BottomApp">
and removed the string variable declaration from createSeoUrl.
Edit: I don't think you can do it within the DOM. You should use a watcher. See the updated Plunker.
$scope.$watch("seoTitle", function(newValue) {
$scope.seoTitle2 = newValue;
$scope.seoUrl2 = $scope.createSeoUrl(newValue);
})
<input type="text" id="title" class="form-control" placeholder="title" ng-model="seoTitle2">
<input type="text" id="seo_url" class="form-control" placeholder="seo_url" ng-model="seoUrl2">