Please help me to check this part of code.
<body ng-app = "myApp">
<h1>FORM </h1>
<div ng-controller="myController">
<p><label>Username : </label><input type="text" ng-model="user.username" name="username" id="username" /></p>
<p><label>Email : </label><input type="email" ng-model="user.email"/></p>
<p><label>Verifikasi Email : </label><input type="email" ng-model="user.verify_email" /></p>
<p><label>Password : </label><input type="password" ng-model="user.password" id="password" /></p>
<button type="button" ng-click = "add()" >Sig In</button>
</div>
</body>
In my Javascript:
<script>
var app = angular.module('myApp', []);
app.controller("myController", function($scope){
$scope.user = {};
$scope.add = function(){
$scope.data = [
{ nama : $scope.user.username},
{ email : $scope.user.email},
{password : $scope.user.password } ];
console.log($scope.data);
}
});
Thanks for you all. I already update my script. When I click the button, the console didn't print the data. Why? I think there is something wrong.
You didn't define user
But that shouldn't be the problem if you use only user as model like
<input type="text" ng-model="user" name="username" id="username" />
It'll be added as property in the scope without any worries.
But you have added property username in user.
As user is undefined so the scenario will be undefined.username which is not permitted.
Try to defined user as object then any property will automically added.
Like this
$scope.user={};
in your HTML you should
<body ng-app = "myApp">
<div ng-controller="myController">
<p><label>Username : </label><input type="text" ng-model="user.username" name="username" id="username" /></p>
<p><label>Email : </label><input type="email" ng-model="user.email"/></p>
<p><label>Verifikasi Email : </label><input type="email" ng-model="user.verify_email" /></p>
<p><label>Password : </label><input type="password" ng-model="user.password" id="password" /></p>
<button type="button" ng-click = "add(user)" >Sig In</button>
</div>
</body>
in case of
ng-click = "add()"
use
ng-click = "add(user)"
in your controller
$scope.add = function(user){
$scope.data = [
{ name : user.username},
{ email : user.email},
{password : user.password }
];
console.log($scope.data);
}); // End add Function
Related
I'm a newbie to angular, so I need a help.
In html, I wrote the following
<div class="form-group">
<input type="email" name="Email" id="LoginEmail class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
</div>
In angular, I write the following code
angular
.module("LoginForm", [])
.controller("processingLoginForm", ["$scope", function ($scope) {
$scope.userinfo = [
{name : "User1",
account : "user1#whatever.com",
city: "XYZ",
password: "Angular#2017"}
];
}]);
I need to compare the value of input box with the value of the script and show a message if it's not correct, so how can I do that?
Firstly you need to assign model to your template scope. Use ng-model for this purpose. Then you need a form to submit and trigger a function to check if user input matches to the desired values.
Add ng-model and wrap your inputs with a form tag:
<form ng-submit="login()">
<div class="form-group">
<input ng-model="email" type="email" name="Email" id="LoginEmail" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input ng-model="password" type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
Check if user input is valid in Controller:
$scope.login = function() {
const isUserValid = $scope.email === $scope.userinfo[0].account && $scope.password === $scope.userinfo[0].password;
if(isUserValid) {
alert("Logged In Successfully");
}else {
alert("Email or password incorrect. Try again.")
}
}
Here's a working example of the above code.
In your input elements you miss the ng-model attribute. It is used to bind the values with your scope variables.
<input type="email" ... ng-model="email" ...>
<input type="password" ... ng-model="password" ...>
And in your controller you can write
if($scope.email == $scope.userinfo[0].account && $scope.password == $scope.userinfo[0].password){
//Login ok
}else{
//Login failed
}
Assuming there is a form element somewhere above
Add ng-submit to it
<form ng-submit="submit()">
Add ng-model to the form elements.
I have added state.email and state.password
<div class="form-group">
<input ng-model="state.email" type="email" name="Email" id="LoginEmail" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input ng-model="state.password" type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
</div>
Compare the binding values to the values in $scope.userinfo
angular
.module("LoginForm", [])
.controller("processingLoginForm", ["$scope", function ($scope) {
$scope.userinfo = [{
name : "User1",
account : "user1#whatever.com",
city: "XYZ",
password: "Angular#2017"
}];
// when you submit the form, this function will be called
$scope.submit = function (e) {
e.preventDefault();
if ($scope.state.email !== $scope.userinfo[0].account || $scope.state.password !== $scope.userinfo[0].password) {
// did not match
} else {
// matched
}
}
}]);
Below is my custom filter.
app.filter('inputFilter', function () {
return function (str) {
var output;
if (str != "" && str != null && isNaN(str)) {
output = str.trim().toLowerCase();
return output;
}
else {
return str;
}
}
HTML
<form method="post" name="loginForm" class="form-group" novalidate>
<input type="email" name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required />
{{ user.username | inputFilter }} <!--this line is just for test purpose-->
<input type="button" class="btn btn-primary" value="Login" ng-click="login(user)" />
</form>
In this real scenario, filter is not executing.
However, when for testing purpose I flip my html as:-
<input type="text" ng-model="username" class="form-control" /> <br/>
{{ username | inputFilter }}
It filters the input string.
My requirement is :
This is login form, so when user submits his username I want to filter the input & then pass to controller (I agree there are more simple way to do but I want to do it using filter)
How do I run filter for my requirement.
When you using type="email" in the input field , if only email is valid then the value gonna assign to ng-model variable. That's why only for valid email filter would work.
if type="text" then for every character you type model gonna change and filter will get executed
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.user = {};
})
.filter('inputFilter', function () {
return function (str) {
var output;
if (str != "" && str != null && isNaN(str)) {
output = str.trim().toLowerCase();
return output;
}
else {
return str;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form method="post" name="loginForm" class="form-group" novalidate>
<input type="email" name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required />
{{ user.username | inputFilter }}
<input type="button" class="btn btn-primary" value="Login" ng-click="login(user)" />
</form>
</div>
There is nothing wrong with your filter.
The reason you thought your filter is not working is because you've used input type="email" in which ng-model will only update when the value is valid.
and in testing case it is working because you've used type="text" which will automatically updates.
See the demo.
angular.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController)
.filter('inputFilter', inputFilter);
MyController.$inject = ['$scope'];
function MyController($scope) {
$scope.login = function(usr) {
alert(usr);
};
$scope.user = {
username: 'ABC#xyz.com',
name: 'ANYthing'
};
}
function inputFilter() {
return function(str) {
var output;
if (str != "" && str != null && isNaN(str)) {
output = str.trim().toLowerCase();
return output;
} else {
return str;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form method="post" name="loginForm" class="form-group" novalidate>
<div style="border:1px solid"><input type="email" name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required />
<p>email:</p>
<p>value: {{ user.username }}</p>
<p>filter: {{ user.username | inputFilter }}</p>
</div>
<div style="border:1px solid">
<input type="text" name="name" ng-model="user.name" class="form-control" placeholder="Your email address" required />
<p>text:</p>
<p>value: {{ user.name }}</p>
<p>filter: {{ user.name | inputFilter }}</p>
</div>
<!--this line is just for test purpose-->
<input type="button" class="btn btn-primary" value="Login" ng-click="login(user)" />
</form>
</div>
https://jsfiddle.net/jzhang172/xu93yubL/
The particular issue is in my E-mail input field.
Is it possible to only display the ng-show message after the field is validated and when the user is not inside the input field?
In other words, I want the ng-show message to disappear if the user is on the input field.
I've tried a number of combinations of logic and haven't been able to get it to work:
(function(angular) {
'use strict';
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required="" />
<br />
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
<span ng-show="form.uEmail.$error.required" style="background:red;">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email"style="background:red;">This is not a valid email.</span>
</div>
</form>
</div>
</body>
You can use ngFocus and ngBlur directives to achieve desired result...
Just set some variable false on ngFocus and set true with ngBlur and add that variable into your ngShow condition...
<input type="email" ng-model="user.email" name="uEmail" required="" ng-focus="showEmailValidationMsg = false;" ng-blur="showEmailValidationMsg = true;"/>
<br />
<div ng-show="(form.$submitted || form.uEmail.$touched) && showEmailValidationMsg">
<span ng-show="form.uEmail.$error.required" style="background:red;">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email"style="background:red;">This is not a valid email.</span>
</div>
and here is working JSFIDDLE...
i cannot find a problem here, why i cant see the value in the
HTML:
'<div ng-app="BusinessinfoModule" ng-controller="BusinessinfoController"
<label>Your Business Name</label>
<input type="text" class="form-control" name="bussiness" ng-model="bussiness" ng-maxlength="100" required>
</div>'
and the controller:
angular.module('BusinessinfoModule', [])
.controller('BusinessinfoController', function($scope) {
$scope.business = 'aaa';
});
Here the codepen: http://codepen.io/anon/pen/GJggeE
<div ng-app="BusinessinfoModule" ng-controller="BusinessinfoController" >
<label>Your Business Name</label>
<input type="text" class="form-control"
name="bussiness"
ng-model="business " //ng-model which binds your controller scope to ui.
ng-maxlength="100"
required/>
</div>
angular.module('BusinessinfoModule', [])
.controller('BusinessinfoController', function($scope) {
$scope.business = 'aaa';
});
https://jsfiddle.net/ncoxq6zf/
what am trying to do is to get data from the form use it in my controller in HTTP post call but it's not working
I know i might have problem with inheritance of scopes but icant solve it.
here is my controller code:
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.submit = function() {
var url = 'http://localhost:3000/register';
var user = {
email: $scope.email,
password: $scope.password,
};
console.log($scope.user);
$http.post(url, user)
.success(function(res){
console.log('You are now Registered');
//$state.go('app.items');
})
.error(function(err){
console.log('Could not register');
// $state.go('error');
});
};
})
Here is the code of my Template:
<form name="register">
<div class="list">
<label class="item item-input no-border">
<input name="fullname" type="text" ng-model="fullname" placeholder="Full Name" required="">
</label>
<label class="item item-input">
<input name="email" type="email" ng-model="user.email" placeholder="Email" required="">
</label>
<p class="blue-font" ng-show="register.email.$dirty && register.email.$invalid">Please Write valid Email.</p>
<label class="item item-input">
<input name="password" type="password" ng-model="user.password" placeholder="Password" required="">
</label>
<button ng-click="submit();" ng-disabled="register.$invalid" type="submit" class="button signup-btn sharb-border white-font blue-bg-alt border-blue-alt ">
Sign Up
</button>
</div>
</form>
Note: i tried the ng-submit its not really the problem
Inside the controller.
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.user = {
email: '',
password: ''
};
$scope.submit = function() {
And this
var user = {
email: $scope.user.email,
password: $scope.user.password
};
Also drop the ; in ng-click
<button ng-click="submit()" ...>
Try to use rootScope (docs.angularjs.org/$rootScope").