createUserWithEmailAndPassword failed: First argument "email" must be a valid string - angularjs

I'm trying to create a user and register him with firebase/angularfire, i think i'm following the angularfire documentation but i have "createUserWithEmailAndPassword failed: First argument "email" must be a valid string." message.
enter code here
<ion-view>
<ion-content padding="false">
<div class="list list-inset">
<label class="item item-input">
<input type="text" ng-model="email" placeholder="e-mail">
</label>
<label class="item item-input">
<input type="text" ng-model="password" placeholder="Password">
</label>
</div>
<div class="item item-divider text-center">
<a href="" class="button button-positive button-small" ng-click="createUser()">
Enregistrez
</a>
</div>
</ion-content>
</ion-view>
'use strict';
app
.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
console.log("factory");
return $firebaseAuth();
console.log("factory");
}
])
.controller('homepageIndex',function($scope){
})
.controller('homepageSignUp', ['$scope', 'Auth', function($scope, Auth) {
$scope.createUser = function() {
// Create a new user
Auth.$createUserWithEmailAndPassword($scope.email, $scope.password)
.then(function(firebaseUser) {
}).catch(function(error) {
console.log("error");
});
};
}
]);
if it can help somebody i found the way like this, i dont know if it's the best way:
<ion-view>
<ion-content padding="false">
<div class="list list-inset">
<label class="item item-input">
<input type="text" ng-model="newUser.email" placeholder="e-mail">
</label>
<label class="item item-input">
<input type="text" ng-model="newUser.password" placeholder="Password">
</label>
</div>
<div class="item item-divider text-center">
<a href="" class="button button-positive button-small" ng-click="registerUser(newUser)">
Enregistrez
</a>
</div>
</ion-content>
</ion-view>
'use strict';
app.factory("Auth", ["$firebaseAuth",
function ($firebaseAuth) {
return $firebaseAuth();
}
]);
app.controller('homepageIndex', function ($scope) {
});
app.controller('homepageSignUp', ['$scope', 'Auth', function ($scope, Auth) {
var newUser = $scope.newUser = { email: "", password: "" };
$scope.registerUser = function () {
Auth.$createUserWithEmailAndPassword(newUser.email, newUser.password)
.then(function (firebaseUser) {
console.log("yas", firebaseUser);
}).catch(function (error) {
console.log("error");
});
};
}
]);

Related

angularfire routing the pages on two or three clicks of a button

I have a controller for signing in firebase
$scope.addUser = function() {
firebase.auth().signInWithEmailAndPassword($scope.Email,$scope.Password).then(function(authData) {
authenticated = true;
console.log("Logged in as:", authData.uid, authenticated);
$location.path("/user_manual");
}).catch(function(error) {
authenticated = false;
console.error("Authentication failed:", error);
$location.path("/");
});
};
And a login.html form
<center><h1>Login</h1></center>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input class="form-control" id="Email"
ng-model="Email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="Password"
ng-model="Password" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label"></label>
<div class="col-sm-4">
<a ng-click="addUser()" class="btn btn-small btn-primary">Login</a>
</div>
</div>
</form>
</div>
As I click on login button it doesn't load user_manual.html for the first time but clicking it on three times it loads user_manual.
The same is with logout button:
I have logout function :
scope.logout = function(){
$window.alert("Do you really want to logout?");
firebase.auth().signOut().then(function() {
$location.path("/");
}).catch(function(error) {
});
And a logout button as:
<a ng-click="logout()" ng-confirm-click="Do you want to logout" class="btn btn-small btn-primary">logout</a>
It also redirects to $location.path("/") on clicking the button twice.
Here is the main controller app.js:
var app = angular.module('myApp',['ngRoute','firebase','ng-fusioncharts','chart.js','720kb.datepicker']);
var config = {
*******************************
};
firebase.initializeApp(config);
var user = firebase.auth().currentUser;
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'UserAdd',
templateUrl: 'views/users/user_login.html'
})
.when('/user_manual', {
controller: 'UserManual',
templateUrl: 'views/user_manual/user_manual.html'
})
.otherwise({
redirectTo: '/'
});
});
Why the buttons not work on a single click action?

ng-click exec function on controllers twice

HTML
<form id="newSaveForm">
<div class="item">
<div class="list">
<label class="item item-input">
<input type="date" ng-model="dateSave" placeholder="Date" required>
</label>
</div>
<div class="list">
<label class="item item-input">
<input type="number" ng-model="moneySave" placeholder="Deposit?" required>
</label>
</div>
<button class="button button-block button-balanced ion-android-checkbox-outline" data-ng-click="addMoney(dateSave,moneySave)" ng-disabled="buttonDisabled"> Save </button>
</div>
</form>
JavaScript
.controller('saveCtrl', function($scope, $state, $http, $filter) {
getAll();
$scope.addMoney = function(tgl, jml) {
$scope.buttonDisabled = true;
$http.post("http://localhost/mymoney/insert.php?jml=" + jml + "&tgl=" + conv_date(tgl)).success(function(response) {
getAll();
$scope.dateSave = "";
$scope.moneySave = "";
console.log('Success Insert');
}).finally(function() {
$scope.buttonDisabled = false;
});
};
function getAll() {
$http.get("http://localhost/mymoney/deposit.php")
.then(function(response) {
$scope.listDeposit = response.data.records;
});
};
function conv_date(tgl) {
return $filter('date')(tgl, 'yyyy-MM-dd');
};
});
Why when I click addMoney function twice I get 2 results in one time

how to pass input ng-model to services using angular and php

im having problem for $http.get to retrieve json from input fields value from view. heres my code
My form
<div class="container">
<div class="col">
<div class="app-logo"><img src="img/logo.svg"></div>
<div class="list list-inset removePM">
<label class="item item-input">
<input type="text" ng-model="user.username" placeholder="NRIC" >
</label>
<label class="item item-input">
<input type="password" ng-model="user.password" placeholder="Password" > </label>
</div>
<div class="loginButton"><button class="button ion-unlocked button-block button-balanced custom-button" ng-click="login(user);"> Login </button> </div>
</div>
My controller
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($scope, LoginService,
$ionicPopover, $timeout, $location, $ionicPopup, Profiles){
$scope.login = function (user) {
Profiles.grab(user);
};
})
My Services
.factory('Profiles', function($http, $location, sessionService, $window, LoginService) {
var profiles = {content:null};
$http.get('http://192.168.0.113/soap-request/soap.php?username='+ user.username +'&password=' + user.password +'').success(function(data) {
profiles.content = data;
return true;
});
grab: function(data, $http) {
return profiles;
}
});

Ionic/AngularJS: local data is showing up blank when form is submited

I'm trying to save the data from a form, which is in a modal, to local storage. But, for some reason, the data is coming up blank.
For example, when I get the data, it returns this:
, , , , ,
instead of this:
Name, Email, Year, Major, Phone#
So, it seems like it is saving a blank entry. I'm very new to AngularJS so I can't figure out how to fix it. If anyone could help me out that would be amazing!
controllers.js
angular.module('starter.controllers', [])
.controller('AppController',['$scope', 'getLocalStorage', '$ionicModal', function ($scope, getLocalStorage, $ionicModal) {
$scope.todos = getLocalStorage.getTodos();
$scope.clearSelected = function () {
$scope.todos = $scope.todos.filter(function (item) {
return !item.selected;
});
getLocalStorage.updateTodos($scope.todos);
};
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('ModalCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
$scope.todos = getLocalStorage.getTodos();
$scope.addTodo = function () {
$scope.todos.push(
{'name': $scope.name,
'email': $scope.email,
'year': $scope.year,
'major': $scope.major,
'phone': $scope.phone,
'selected': false});
$scope.modal.hide();
getLocalStorage.updateTodos($scope.todos);
};
}])
.controller('InfoCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
$scope.todos = getLocalStorage.getTodos();
}
]);
services.js
angular.module('starter.services', [])
var storageService = angular.module('storageService', []);
storageService.factory('getLocalStorage', function () {
var todoList = {};
return {
list: todoList,
updateTodos: function (todosArr) {
if (window.localStorage && todosArr) {
localStorage.setItem("todos", angular.toJson(todosArr));
}
//update the cached version
todoList = todosArr;
},
getTodos: function () {
todoList = angular.fromJson( localStorage.getItem("todos") );
return todoList ? todoList : [];
}
};
})
html
<ion-view view-title="TechProf">
<ion-content>
<button class="button button-full button-positive" ng-click="modal.show()">OPen Modal</button>
<ion-list>
<h3>List</h3>
<ul class="list">
<li ng-repeat="s in todos" class="item">
<input ng-model="s.selected" type="checkbox" />
<span ng-class="{'selected': todo.selected}">{{ s.name }}, {{ s.email }}, {{ s.year }},{{ s.major }}, {{ s.phone }}</span>
</li>
</ul>
<button class="button button-full button-positive" ng-click="clearSelected()">Delete Selected</button>
</ion-list>
</ion-content>
<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</header>
<ion-content has-header="true">
<form name="frm" ng-submit="addTodo()">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="name" required>
</label>
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="email" required>
</label>
<label class="item item-input item-select">
<div class="input-label">Year</div>
<select ng-model="year" required>
<option selected>Freshman</option>
<option >Sophmore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</label>
<label class="item item-input">
<input type="text" placeholder="Major" ng-model="major" required>
</label>
<label class="item item-input">
<input type="number" placeholder="Phone" ng-model="phone" ng-minlength="10" required>
</label>
<button class="button button-full button-positive" ng-disabled="frm.$invaild">Submit</button>
</div>
</form>
</ion-content>
</div>
</script>
</ion-view>
Working Plunker
ngModel
One of the keys to getting this is move all of the form inputs ng-model point to an object.property like this answer suggests.
Basically that means you need to do something like this for your HTML inputs:
<input type="text" ng-model="info.name">
And put this in your controller:
$scope.info = {};
Because of the ngModel you'll need to change the $scope.addTodo function. While you're at it you can also reset the form data on submit by adding $scope.info = {};.
$scope.addTodo = function() {
$scope.todos.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateTodos($scope.todos);
$scope.info = {};
};
You can also move it from ModalCtrl to your AppController because you won't need the ModalCtrl anymore.
Modal Scope
Add scope: $scope to your modal so it uses the scope from your AppController.
Like this:
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
Remove
Remove the ModalCtrl controller and the ng-controller="ModalCtrl" from your HTML.
In services.js remove this (it's unnecessary):
var storageService = angular.module('storageService', []);
storageService
Change
In your getLocalStorage factory, change this var todoList = {} to this var todoList = [] because you want an array of objects so you need to start with an array.
In your modal's HTML change <ion-content has-header="true"> to <ion-content class="has-header"> as suggested by Ionic.

Form Submission in Modal Window and Refresh Content of a Tab

I have 2 tabs: list.brands and add.brand:
<script type="text/ng-template" id="list.brands">
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
<input type="text" ng-model="searchBox">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
<td>{{brand.brandid}}</td>
<td>{{brand.name}}</td>
<td>{{brand.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</script>
<script type="text/ng-template" id="add.brand">
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal" name="brandform">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" required/>
<span ng-show="brandform.name.$error.required"> Name is required. </span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" name="isactive" value="1">
</div>
</div>
<div class="section-heading"><tags:label text="logo"/></div>
<div class="control-group">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button ng-disabled="brandform.name.$invalid" type="submit" class="btn btn-ext-lightblue"><tags:label text="save"/></button>
</div>
</form>
</div>
</div>
</div>
</script>
I switch them with
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="TabsCtrl">
<div id="tabs" >
<ul class="nav nav-tabs content-tab-header" id="content_tab_0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
</ul>
</div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
At list, I can open a modal window that contains brand details by clicking edit button in list.brands. My modal window:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and my app is here:
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller("BrandsCtrl", function($scope, $http, $controller) {
$http.get('/admin.brands/getJSONDataOfSearch').
success(function(data, status, headers, config) {
$scope.brands = data;
}).
error(function(data, status, headers, config) {
});
angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
});
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, item) {
$scope.item = item;
$scope.ok = function () {
$scope.form.brandform.submit();
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
app.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'list.brands',
url: 'list.brands',
cssClass: 'icon-th-list'
}, {
title: 'add.brand',
url: 'add.brand',
cssClass: 'icon-plus'
}];
$scope.currentTab = 'list.brands';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>
My questions is; how can I submit my edit form in modal to a target URL and refresh the list of brands.
in angular, form has a in-built event called ng-submit. You can submit the form in either way via submit button or using enter key. on ng-submit event, you need to pass a function which must be written within your controller. in that controller you can do what ever you want to do. To use a service, go through the documentation.
Here I am attaching an working example of Form Submit with Service integrated in it (Just for your reference, I have added 2 different controllers which are sharing the same service):
Fiddle: http://jsfiddle.net/ashishanexpert/zvcx5z38/2/
I think this could help you. Thanks
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
modalInstance.result.then(function (item) {
//The function that load your data in this controller
LoadData();
})
}

Resources