How to read data inserted in ng-model? - javascript

I am working on ionic framework.I am trying to create a login page.I want to read data inserted in username and pass word fields in login.html.I tried to read using $scope but that didn't work.I tried to use console.log() to print the variables in console but i am getting an error saying it is "undefined".I am new to ionic and angularjs.
login.html:
<ion-view view-title="Login" name="menuContent">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew()">Log in</button>
</label>
<label class="item">
<span class="input-label">New user?</span>
<button class="button button-block button-positive" ng-click="signNew()">Signup</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
app.js:
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('app.signup', {
url: '/signup',
views: {
'menuContent': {
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
}
}
})
controller.js:
//start LoginCtrl
.controller('LoginCtrl', ['$scope','$state','$http' , function($scope,$state,$http) {
$scope.signNew=function(){
console.log("sas");
$state.go('app.signup');
console.log("sas");
};
$scope.loginNew = function($scope){
console.log($scope.user+" daww");
console.log($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
console.log("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])
//end LoginCtrl
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//start SignupCtrl
.controller('SignupCtrl', ['$scope', function($scope) {
}]);
//end SignupCtrl

When you use form in your HTML then go for ng-submit not
ng-click, because ng-click not validate your html. Example: If you use required in input box then ng-click not validate required so use
ng-submit
See this Documentation ng-submit
Note: It is not compulsory to use ng-submit it is just and best
practices which we have to follow
And as per you problem you have to pass one object from html and get this object in controller. it will solve your problem.
<form ng-submit="loginNew(login)">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="login.user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="login.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" >Log in</button>
</label>
<label class="item">
<span class="input-label">New user?</span>
<button class="button button-block button-positive">Signup</button>
</label>
</div>
</form>
Now in controller :
$scope.loginNew = function(mylodinObject){
console.log(mylodinObject.user+" daww");
console.log(mylodinObject.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+mylodinObject.user+"&Password="+mylodinObject.pass)
.success(function(data) {
alert("Login was Successful.");
console.log("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
Some time if you want to use both ng-click and ng-submit then you will be in problem so for that refere this link it will solve your problem :ng-click and ng-submit

.controller('LoginCtrl', ['$log','$scope','$state','$http' , function($log,$scope,$state,$http) {
$log.debug($scope.user);
$log.debug($scope.pass);
Need not pass $scope as the parameter here
$scope.loginNew = function(){
$log.debug($scope.user);
$log.debug($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
$log.debug("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])

Design the form as follows
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="xxx.user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="xxx.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew(xxx)">Log in</button>
</label>
</div>
</form>
and in controller
$scope.loginNew = function(xxx){
console.log(xxx); // this gives the user and pass variables from form
console.log(xxx.user); //for user
console.log(xxx.pass); //for pass
};

Related

javascript Angularjs validation not showing

I am using ex6 and angularjs and I write an angularjs validation form.
the HTML doesn't show up. it's not showing any errors.
The HTML of the validation :
<form id="form" name="login.sign" class="setup info" novalidate>
<div class="input-group login-max-width">
<span class="input-group-addon" id="login-addon">
<i class="fa fa-envelope" id="login-addon"></i>
</span>
<input id="login.credentials.email" type="email" class="form-control email validate valid"
name="login.credentials.email" ng-model="login.credentials.email" placeholder="Email" required>
</div><br />
<div class="input-group">
<span class="input-group-addon lock-fix">
<i class="fa fa-lock"></i>
</span>
<input id="login.credentials.password" type="password" class="form-control password validate valid"
name="login.credentials.password" ng-model="login.credentials.password" placeholder="Password" ng-minlength="6" required>
</div>
<center>
<div class="input-group text-center" ng-show="login.error">
<h3 class="error-show">{{login.error}}<i class="fa fa-exclamation-triangle"></i></h3>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 login-flex-display">
<button type="submit" class="btn btn-success right-margin-button" ng-click="login.signIn(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Login
</button>
<button type="submit" class="btn btn-success" ng-click="login.signUp(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Register
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.email.$invalid">Email is not valid</h5>
</div>
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid">Password must be atleast 6 digits</h5>
</div>
</div>
</form>
The routes.login.js :
import template from './login.html';
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('login', {
url: '/Login',
template: template,
controller: 'LoginController',
controllerAs: 'login'
});
}
The login controller :
import {createUser} from '../../api/usersApi';
export default class LoginController {
constructor($location, authentication) {
this.location = $location;
this.authentication = authentication;
this.error = '';
}
}
LoginController.$inject = ['$location', 'authentication'];
Thx for the help guys. hope you have any idea how to solve it out.
i think its related to the "sign" and to controller as name "login"
But i still didn't figure it out.
try to change ng-show="login.error" to ng-show="login.sign.error" angular bind the the error to the name of the form
I hope this helped you.

Strange dot in each page that use ionic v1 and angularjs

I don't know the reason why, but at each of page of my webapp, at the left side upper there is a dot like this:
It's an html problem I think, in fact running the snippet below you can see that:
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
However, I put also the controller of this page:
.controller('SendFeedbackCtrl', function($scope, $stateParams, $ionicPopup, restService) {
var token = localStorage.getItem("token");
$scope.tknuser = JSON.parse(token);
$scope.logged = false;
$scope.feedbackform = {
message: "adad",
readfb: false,
user: {
iduser: -1
}
};
And also the class style used:
.ioncontentcatalog {
background-image: url('../img/background.png')
}
That's very strange and I don't know how to solve.
It is the li default style, add this CSS rule to remove it:
list-style
https://developer.mozilla.org/en/docs/Web/CSS/list-style
.ioncontentcatalog li{
list-style: none;
}
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
Just remove li decoration like this:
<li style="list-style-type: none;">

AngularJS - function not working on ng-click

my scope function "login()" is not working when the user enter with the "ng-click" , why is not working? please help!
HTML
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
Funcion on controller
.controller('loginCtrl', ['$scope', "Auth", '$state',
function ($scope, Auth, $stateParams) {
$scope.login = function() {
$signin_email = $scope.userloginForm.email.$modelValue;
$signin_password = $scope.userloginForm.password.$modelValue;
// sign in
Auth.$signInWithEmailAndPassword($signin_email, $signin_password)
.then(function(firebaseUser) {
//$scope.message = "User created with uid: " + firebaseUser.uid;
alert(firebaseUser.email + " logged in successfully!");
}).catch(function(error) {
alert(error.message);
//$scope.error = error;
});
};
}])
That is the form :
<form id="login-form1" name="$parent.userloginForm" class="list" >
<div class="spacer" style="height: 40px;"></div>
<ion-list id="login-list1">
<label class="item item-input" id="login-input1">
<span class="input-label">Email :</span>
<input type="text" name="email" ng-model="member.email" placeholder="">
</label>
<label class="item item-input" id="login-input2">
<span class="input-label">Senha :</span>
<input type="password" ng-model="member.password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
<a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a>
</form>
Try to use $scope.member.email instead of $scope.userloginForm.email.$modelValue and $scope.member.password instead of $scope.userloginForm.password.$modelValue inside login function, cause into this properties Angular writes from form's inputs. Of course, an the top of your controller, you should have $scope.member = {}. Also, I think your form's name should be userloginForm, not $parent.userloginForm. And one more thing - if you don't have to, you should not use ng-click() to submit form, you should ng-submit="login" on your form and <button id="login-button1" class="button button-assertive button-block icon-right ion-log-in type="submit">Entrar</button>
Instead of using $scope.userloginForm.email.$modelValue you can directly pass ng-model object as a parameter in the login function.
In HTML :
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>
In controller :
$scope.login = function(member) {
var signin_email = member.email;
var signin_password = member.password;
console.log(signin_email);
console.log(signin_password);
}
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.login = function(member) {
var signin_email = member.email;
var signin_password = member.password;
console.log(signin_email);
console.log(signin_password);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form id="login-form1" name="userloginForm" class="list" >
<div class="spacer" style="height: 40px;"></div>
<ion-list id="login-list1">
<label class="item item-input" id="login-input1">
<span class="input-label">Email :</span>
<input type="text" name="email" ng-model="member.email" placeholder="">
</label>
<label class="item item-input" id="login-input2">
<span class="input-label">Senha :</span>
<input type="password" ng-model="member.password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>
<a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a>
</form>
</div>

How to validate form using if statement javascript in angular

I need to validate login function. I added my Login.html file and LoginController.js file. I want to validate this from using this javascript. This is angularjs code. after that I have to set php url for this code.
Login.html
$scope.submitForm = function() {
var user_email = user_email;
var user_password = user_password;
if(user_email && user_password){
console.log(user_email);
}
};
<div ng-controller="LoginController">
<form name="userForm" ng-submit="submitForm()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" name="user_email" ng-model="user.user_email" required>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="user_password" ng-model="user.user_password" required>
</label>
</div>
<span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span> </br>
<span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>
<button class="button button-block button-positive activated">Sign In</button>
<button onclick="location.href='#/login/:friendId/register/';" class="button button-block button-positive activated">Register</button>
</form>
</div>
Made changes in your provided code,on click of Register/ Sign In you can call submitForm() function through ng-click to evaluate the form values.Check the below code snippet for working model.
angular.module('myApp', ['ng'])
.controller('LoginController', ['$scope',
function($scope) {
$scope.user = {};
$scope.submitForm = function() {
var user_email = $scope.user.user_email;
var user_password = $scope.user.user_password;
if (user_email && user_password) {
console.log(user_email);
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<form name="userForm">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" name="user_email" ng-model="user.user_email" required>{{user.user_email}}
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="user_password" ng-model="user.user_password" required>{{user.user_password}}
</label>
</div>
<span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span>
</br>
<span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>
<button class="button button-block button-positive activated">Sign In</button>
<button ng-click="submitForm()" class="button button-block button-positive activated">Register</button>
</form>
</div>

AngularJS - Getting 'undefined'

I making a login form with AngularJS. After entering user & password and on clicking the Login button I am trying to retrieve those values. But those are printed as undefined.
My code looks like below.
Javascript
File: app.js
var mdmApp = angular.module('mdmApp', [ 'ngRoute' ]);
mdmApp.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/home', {
templateUrl : 'partials/home.html',
controller : 'homeController'
}).when('/login', {
templateUrl : 'partials/login.html',
controller : 'loginController'
});
}).controller('homeController', function($scope) {
}).controller('loginController', function($scope) {
var user = $scope.user;
var password = $scope.password;
$scope.login = function() {
console.log($scope.user + "-" + $scope.password);
}
})
HTML
File : partials/login.html
<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<form role="form" ng-submit="login()">
<div ng-app="mdmApp" ng-controller="loginController">
<div class="form-group" >
<label for="user" class="control-label">User</label>
<input id="user" type="text" ng-bind="user" class="form-control">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input id="password" type="password" ng-bind="password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
</div>
</div>
</form>
You should be using ng-model, not ng-bind:
<input id="user" type="text" ng-model="user" class="form-control">
<input id="password" type="password" ng-model="password" class="form-control">

Categories

Resources