Develop Reference

How to get values from input boxes and save to database with button click angular

I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}

How to move cursor-to-next from one input to another input and button by pressing keyboard enter in angular 6

From the Login design page I have to move the cursor from the Username to the Password <input>, and the same procedure from Password to the <button> click event so that I can login to my page by pressing the keyboard enter key, in Angular 6.
My HTML code below:
<div class="ibox-content login-form">
<div class="form-group">
<input type="text" class="form-control" id="inputUername" placeholder="Username" [(ngModel)]="loginData.username" autofocus >
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" [(ngModel)]="loginData.password" >
</div>
<button type="submit" icon="fa fa-sign-in" class="btn btn-primary" [disabled]="loginData.username == '' || loginData.password == ''"
(click)="login()">Login</button>
<div class="login-error-message" *ngIf="content.loginFailed">
<p>Invalid username or password</p>
</div>
</div>

Use (keyup.enter) = "focusablePassword.focus()" to input Username and call #focusablePassword to input Password, this would perform the task and same for button as shown in code below.
<div class="ibox-content login-form">
<div class="form-group">
<input type="text" class="form-control" id="inputUername" placeholder="Username" [(ngModel)]="loginData.username" autofocus (keyup.enter)="focusablePassword.focus()">
</div>
<div class="form-group">
<input #focusablePassword type="password" class="form-control" id="inputPassword" placeholder="Password" [(ngModel)]="loginData.password" (keyup.enter)="focusableSubmit.focus()" >
</div>
<button #focusableSubmit type="submit" icon="fa fa-sign-in" class="btn btn-primary" [disabled]="loginData.username == '' || loginData.password == ''"
(click)="login()">Login</button>
<div class="login-error-message" *ngIf="content.loginFailed">
<p>Invalid username or password</p>
</div>
</div>

Show add button only when the form is dirty

I have a form with email, password, and password again. I want to hide the add sign by default, and only show it if my form is dirty and password matches password again.
I can’t seem to get it to work.
<div ng-controller="MyCtrl">
Hello, {{name}}!
<form name="addUserForm">
<div class="form-row row">
<div class="col-xs-3 col-sm-3">
<input ng-model="newLogin.email" ng-blur="checkEmailRestriction(newLogin.email)" required type="text" class="form-control input-sm" placeholder="Email">
</div>
<div class="col-xs-3 col-sm-3">
<input ng-model="newLogin.password" required stopccp type="password" class="form-control input-sm" ng-change="checkPwdRestriction(newLogin.password)" placeholder="Password">
</div>
<div class="col-xs-3 col-sm-3">
<input stopccp ng-model="newLogin.passwordAgain" ng-change="checkPwdMatch(newLogin.password,newLogin.passwordAgain)" type="password" class="form-control input-sm" placeholder="Password Again">
</div>
<div class="col-xs-3 col-sm-3">
<a ng-click="storeLogin()" ng-if="newLogin.password === newLogin.passwordAgain && addUserForm.$dirty == false" class="btn btn-xs email-action"> add </a>
</div>
</div>
</form>
<hr>
<p>
object = ? {{newLogin}}
</p>
<p>
$dirty = ? {{addUserForm.$dirty}}
</p>
<p>
$valid = ? {{addUserForm.$valid}}
</p>
</div>
I’ve tried
http://jsfiddle.net/bheng/5pzL8gc3/

I hided your button with this :
ng-show="newLogin.password && newLogin.password == newLogin.passwordAgain && addUserForm.$dirty == true"
And it appears when I provide an email and passwords that match.

AngularJS form validation not functioning

I'm doing something wrong but cant see what. I've followed the angular js docs and the validations are not working:
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
with a controller as follows:
'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {
$scope.requestCallback = function () {
alert("form callback");
};
}]);
However, I can't get my error messages to appear. Also the ng-minlength are not restricting the form submission? Am I missing something simple here?

Your code seems to work fine.
Regarding the submission restriction on error - you have to explicitly use angular's valiation by doing something like:
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
Here's a snippet:
function Ctrl($scope) {
$scope.requestCallback = function() {
alert("form callback");
};
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
<p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
<p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
<p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
</div>
</form>
</div>
</div>

Your form is validating.. in order to call requestCallback() function, you need to bind your form to controller.
Wrap your form inside controller with ng-controller
<div ng-controller="footerController">
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
</div>
</div>

ng-submit is not executed

i have the following form:
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
It is very simple.
Now i have the following controller code:
userModule.controller('UserController', ['$http', '$scope', function($http, $scope) {
this.user = {
username: "",
password: ""
};
$scope.test = function() {
alert($scope.user);
}
}]);
Now when i try to submit my form the test function is never called.
Can anyone tell me why?
Update of my code
userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
var vm = this;
vm.user =
{
username: "",
password: ""
};
vm.test = function()
{
alert(vm.user);
}
}]);
Form
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
Full code
UserModule
/**
* Created by root on 2/12/15.
*/
(function () {
var userModule = angular.module('user', []);
userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
var vm = this;
vm.user =
{
username: "",
password: ""
};
vm.test = function()
{
alert(vm.user);
}
}]);
userModule.controller('LoginController', function()
{
this.password_form = {};
this.state = 'login';
this.setState = function(value)
{
this.state = value;
};
this.checkState = function(value)
{
return value == this.state;
}
})
})();
FULL html view
<span ng-controller="LoginController as loginCtrl">
<section class="panel panel-default bg-white m-t-lg animated fadeInDownBig" id="login_section" ng-show="loginCtrl.checkState('login');"
xmlns="http://www.w3.org/1999/html">
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
<p class="text-muted text-center wrapper-lg">
<small>
<a href="" ng-click="loginCtrl.setState('order')" id="order_demo">Er du endnu ikke bruger af <span class="text-lb">Learningbank</span>? Tryk her
og få en gratis demo</a>
</small>
</p>
<div class="line line-dashed"></div>
<p class="text-muted text-center">
<small>Glemt kodeord?</small>
</p>
</section>
<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_retrieve" ng-show="loginCtrl.checkState('password')">
<section class="panel-heading">
<h3 class="h3">Glemt dit kodeord?</h3>
<p class="text text-muted">Indtast din mail adresse og få tilsendt en ny</p>
</section>
<form method="POST" class="panel-body wrapper-lg" action="/Users/retrieve_password">
<div class="form-group">
<label class="control-label">E-mail</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail" ng-model="notificationCtrl.mail" ng-required="">
</div>
<button ng-click="loginCtrl.setState('login')" id="btn_back" type="button" class="btn btn-default"><i class="fa fa-arrow-left"></i> Tilbage</button>
<input type="submit" class="btn btn-primary pull-right" value="Send">
</form>
</section>
<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_demo" ng-show="loginCtrl.checkState('order');">
<section class="panel-heading">
<h3 class="h3">Bestil en gratis demo</h3>
<p class="text text-muted">Udfyld nedenstående formular og få en gratis demo</p>
</section>
<form method="POST" name="demo" class="panel-body wrapper-lg" action="/Users/contact" data-parsley-validate>
<div class="form-group">
<label for="txt_email" class="control-label">E-mail *</label>
<input type="email" class="form-control input-lg" id="txt_email" name="email" placeholder="E-mail"
data-parsley-trigger="change" required/>
</div>
<div class="form-group">
<label for="txt_fornavn" class="control-label">Fornavn *</label>
<input type="text" class="form-control input-lg" id="txt_fornavn" name="fornavn" placeholder="Fornavn"
data-parsley-trigger="change" required/>
</div>
<div class="form-group">
<label for="txt_efternavn" class="control-label">Efternavn</label>
<input type="text" class="form-control input-lg" id="txt_efternavn" name="efternavn"
placeholder="Efternavn">
</div>
<div class="form-group">
<label for="txt_telefon" class="control-label">Telefon</label>
<input type="text" class="form-control input-lg" id="txt_telefon" name="phone" placeholder="Telefon">
</div>
<div class="form-group">
<label for="txt_virksomhed" class="control-label">Virksomhed *</label>
<input type="text" class="form-control input-lg" id="txt_virksomhed" name="company" placeholder="Virksomhed"
data-parsley-trigger="change" required/>
<small>* påkrævet</small>
<br>
</div>
<button id="btn_back_demo" type="button" class="btn btn-default" ng-click="loginCtrl.setState('login')"><i class="fa fa-arrow-left"></i>Tilbage
</button>
<input type="submit" class="btn btn-primary pull-right" value="Send">
</form>
</section>
<section class="panel panel-default bg-learning padder padder-v m-t-lg animated fadeInDownBig text-center">
<p class="font-semibold">
Velkommen til Learningbank
<br/>
"Dit personlige læringsmiljø"
</p>
<span style="font-size: 12px; margin-bottom: 5px;">Vil du vide mere om Learningbank, kan du se mere <a
href="http://www.learningbank.dk/" target="_blank" class="font-semibold"
style="text-decoration: underline; color:#fff;">her</a></span>
<span style="font-size: 12px;">PLE - Personal Learning Environment</span>
</section>
</span>

Because you are using the controller as syntax you need to bind the test function to this not to $scope.
I would however recommend doing something like
var vm = this;
On this first line. The function then becomes:
vm.test = function() {
alert(vm.user);
}
See https://github.com/johnpapa/angularjs-styleguide#controllers for more details. Highly recommend reading that guide.

For HTML:
No need to use 'userCtrl', you are already binded controller to the form.
For JS:
You are written this.user. But it should be $scope.user
It will work