I'm using AngularFire in an Ionic project for the first time. I followed the example in the docs on the firebase website for Auth with email and password.For some reason my $scope values from ng-model aren't binding properly.
angular.module('starter')
.controller('RegisterController', ['Auth', '$scope', function(Auth, $scope) {
$scope.createUser = function() {
$scope.message = null;
$scope.error = null;
Auth.$createUser({
email: $scope.email,
password: $scope.password
})
.then(function(userData) {
$scope.message = "User created: ";
})
.catch(function(error) {
$scope.error = error;
});
};
}]);
If I replace the $scope.email and $scope.password` with a hardcoded email and password it works. Here is the template with the email and password model data.
<ion-view view-title='Register A New Account' hide-back-button="false">
<ion-content class='padding'>
<div class="list list-inset">
<label class='item item-input'>
<span class='input-label'>Email</span>
<input type="text" placeholder='example#email.com' ng-model="email">
</label>
<label class='item item-input'>
<span class='input-label'>Password</span>
<input type="password" placeholder='' ng-model='password'>
</label>
<label class='item item-input'>
<span class='input-label'>Cell Phone</span>
<input type="tel" placeholder='316-333-3333'>
</label>
<label class='item item-input'>
<span class='input-label'>Date of Birth</span>
<input type="date">
</label>
<label class='item item-input'>
<span class='input-label'>City</span>
<input type="number" placeholder='Wichita'>
</label>
<label class='item item-input'>
<span class='input-label'>State</span>
<input type="number" placeholder='Kansas'>
</label>
<label class='item item-input'>
<span class='input-label'>Zipcode</span>
<input type="number" placeholder='67208'>
</label>
</div>
<ion-checkbox>
I agree to terms and conditions
</ion-checkbox>
<button class='button button-block button-calm' ng-click='createUser()'>Login</button>
<p ng-if='message'>Message: {{message}}</p>
<p ng-if='error'>Error: {{error}}</p>
</ion-content>
</ion-view>
Is my $scope value set wrong or is there something about the createAuth method that I am missing?
If anyone else runs into this problem it was a simple fix! I just had to make my $scope variables for email and password into a user object to access them using user.email. This state had a child scope that was conflicting.
Related
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>
This is my signup.html file i want to take only password and username from this form to my controller.but I not able to access form elements through this !
<ion-view view-title="Sign Up">
<ion-content ng-controller="signup">
<div class="figure_img">
<img src="img/logo_image.png">
</div>
<form name="myForm">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Email ID" id="email" name="email" ng-model="formData.email"
required>
<span ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
<span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>
</label>
<label class="item item-input">
<input type="password" placeholder="Password" id="password" name="password"
ng-model="formData.password" required>
<span ng-show="myForm.password.$error.required && myForm.password.$dirty">required</span>
</label>
<label class="item item-input">
<input type="password" placeholder="Confirm Password" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required>
<span ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">Please confirm your password.</span>
<span ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && myForm.password.$dirty">Passwords do not match.</span>
</label>
<div class="contain-body">
<button class="button button-block button-positive" ng-click="signup(myForm)">SignUp</button>
</div>
</div>
</form>
</ion-content>
</ion-view>
this is my controller for signup
app.controller("signup", function ($scope,$http,$ionicPopup,URL,$ionicLoading,$timeout,$state) {
$scope.data = {
email :'',
password :''
};
$scope.signup = function (data) {
console.log(data);
$http.post(URL.url + '/registration',data)
.success(function () {
$ionicLoading.show({template:'<ion-spinner class="spinner-energized"></ion-spinner>Complete your Registration through Email'});
$timeout(function () {
$ionicLoading.hide();
$ionicHistory.clearCache().then(function() {
$state.go('EmailLogin') ;
});
},5000);
}).error(function (response) {
$ionicPopup.alert({
title: 'Sign-Up failed!',
template:response.errors.email
});
});
}
});
how could i take only password and username in my controller ..
so that it gets easy to signup !
You are actually passing the form controller to your signup method. This is not what you want.
You already got access to your email and password field values through formData.email and formData.password in your view, so you can adjust the call to the signup by including formData as suggested in the comments.
But as you declare $scope.data is your controller, you might want to reuse those instead of formData in your ng-model directive of the view, because currently this data object does not seem to be used.
Create an object in the function using the data you received. Just do something like var reqData = { email: data.email, password: data.password }; and then do $http.post(URL.url + '/registration',reqData).
Hope it helps.
I have two text box for username and password, when each user enter data it should send to api. how can i make it work.
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
You should read through the angular documentation for forms.
https://docs.angularjs.org/guide/forms
Here's a quick example of a template + controller.
html
<form action="submitLogin()">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</form>
controller
var example_app = angular.module("example_app ", []);
example_app.controller("LoginController", ['$scope', '$http', function($scope, $http) {
$scope.loginData = {};
$scope.submitLogin= function(){
var res = $http.post('http://login.com/postLogin', loginData);
res.success(function(data, status, headers, config) {
$scope.message = data;
// go to authorized page
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
};
}]);
Documentation doesn't show the action= functionality, but shows a ng-click on the submit button instead. Both work fine.
Edit:
Was going to mention, but forgot to, that you should try to use angular services for instead of using $http directly in your controller.
https://docs.angularjs.org/guide/services
https://github.com/johnpapa/angular-styleguide
Why the name and password are undefined?
I've used ng-model on them...
<form class="login" name="form">
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="name">Name: </label>
<input type="text" ng-model="name" id="name" class="form-control" placeholder="Nitzan">
</div>
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="password">Password: </label>
<input type="password" ng-model="password" id="password" class="form-control" placeholder="1234">
<p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
</div>
<button type="submit" class="btn btn-block btn-lg btn-success login-btn" ng-click="login()">Login</button>
</form>
In the controller:
$scope.login = function () {
usersService.get($scope.name, $scope.password).then(function success(result){
$scope.currentUser = result;
}, function error() {
$scope.isInvalidLogin = true;
});
};
See the plunker:
http://plnkr.co/edit/QD3vtil3w9pd4d1TGl9v?p=preview
Your problem is because of ng-if directive which is creating child scope from current scope. Hence $scope.name & $scope.password is undefined inside $scope.login function.
I'd suggest you do create one object for user which is initially blank like user={} or you can do this on html using ng-init, then put it inside of mainController so that it can directly access by the parent without doing $parent. notation.
And place name and password inside user object.
HTML
<div ng-init="user={}">
<div class="container login-div" ng-if="!currentUser">
<form class="login" name="form" ng-submit="login()">
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="name">Name:</label>
<input type="text" ng-model="user.name" id="name" class="form-control" placeholder="Nitzan">
</div>
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="password">Password:</label>
<input type="password" name="test" ng-model="user.password" id="password" class="form-control" placeholder="1234">
<p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
</div>
<button type="submit" class="btn btn-block btn-lg btn-success login-btn">Login</button>
</form>
</div>
</div>
CODE
$scope.login = function () {
alert("Name "+ $scope.user.name +"& password is " +$scope.user.password)
//usersService.get($scope.name, $scope.password).then(function success(result){
// $scope.currentUser = result;
//}, function error() {
// $scope.isInvalidLogin = true;
//});
};
Working Plunkr here.
Update
Otherwise you need to add change your ng-model to refer this scope to parent scope like
HTML
For name ng-model="$parent.name"
For password ng-model="$parent.password"
CODE
$scope.login = function () {
alert("Name "+ $scope.name +"& password is " +$scope.password)
//usersService.get($scope.name, $scope.password).then(function success(result){
// $scope.currentUser = result;
//}, function error() {
// $scope.isInvalidLogin = true;
//});
};
Plunkr Here
Hope this could help you. Thanks.