We Keep Coding

AngularJs Form Validation For Edit Page

I have used the error form validation in the addnewstudent page as below and it's working fine.
<td>
<input limit-to="50" type="email" name="input" ng-model="Email" />
<span style="display:none">{{ emailValid = !!myForm.$error.email}}</span>
<span ng-class="customStyle.colorClass">
{{EmailValidation }}
</span>
</td>
Same approach I used for my edit page as like below, but Iam not able to get the bool value of "!!myForm.$error".
my Edit page
<td>
<input limit-to="50" type="text" ng-model="Student.email" />
<span style="display:none">{{ emailValid = !!myForm.$error.Student.email}}
</span>
<span>
{{EmailValidation }}
</span>
</td>
My JS,
$scope.save = function () {
if ($scope.emailValid || $scope.Student.email=='') {
$scope.EmailValidation = 'Not a valid email (ex: me#example.com)';
return;
}
else {
$scope.EmailValidation = '';
}
.......
.......
Where I did go wrong on my edit page?

To validate a form input in angularjs there should be name attribute for that input and form also.
angular.module('sampleApp', [])
.controller('myCtrl', function($scope) {
$scope.Student = {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="sampleApp" ng-controller="myCtrl" >
<form name="myForm" novalidate>
<input limit-to="50" type="email" ng-model="Student.email" name="email" required/>
<div ng-show="myForm.$submitted || myForm.email.$touched">
<span ng-show="myForm.email.$error.required">Tell us your email.</span>
<span ng-show="myForm.email.$error.email">This is not a valid email.</span>
</div>
<button>Submit</button>
</form>
</div>
Above code will check for non empty valid email, which is done by required,type="email" attributes.

Why custom filter is not running in angular?

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>

In angular form span can not be displayed

I am not able to see error message on clicking the submit button using angularjs.
Any lead will be appreciated
Thanks in advance :)
<form id="formbody" ng-submit="submituser(form)" name="form" novalidate>
<input type="text" ng-class="{ errorinput: submitted && form.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
<div style="padding-left: 275px;">
<button type="submit">Submit</button>
<!-- <div type="button" id="btn" style="color: red;" >Submit</div> -->
</div>
</div>
</form>
.controller('ExampleController', function($scope, $location, $scope, $stateParams) {
$scope.singleSelect = '';
$scope.goToPage = function() {
console.log("selectservice");
$location.path("/selectservice");
}
$scope.submituser = function($scope) {
if ($scope.form.$valid) {} else {
$scope.submitted = true;
}
}
})

change ng-show of span to
<span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>

please check the form name
you have used two different names
name ="form" in form tag and used as signUpForm.dob in input field.
Check your ng-model to
<form id="formbody" ng-submit="submituser(form)" name="signUpForm" novalidate>
<input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="form.dob" placeholder="Date of Birth" required />
<span class="e" ng-if="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<div style="padding-left: 275px;">
<button type="submit">Submit</button>
</div>
</div>
</form>
.controller('ExampleController',function($scope,$location,$scope, $stateParams){
$scope.singleSelect='';
$scope.goToPage=function(){
console.log("selectservice");
$location.path("/selectservice");
}
$scope.submitted =false;
$scope.submituser = function(form){
// console.log(form);
if (form.$valid) {
your logic
} else {
$scope.submitted = true;
}
}
})

Try something like that
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.dob.$invalid]">
<label class="control-label" for="dob">Your Date of Birth</label>
<div class="controls">
<input type="text" name="dob" ng-model="dob" required />
<span class="help-inline" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

You have to provide the form name but even after that you cannot refer to your form in controller unless you pass it through the submit function arguments. Also there is not signupForm() function in your controller.
The way to go is :
<form id="formbody" name="myForm" ng-submit="signupForm(myForm)" novalidate>
<!-- inputs etc -->
</form>
Then based on submituser():
$scope.signupForm = function(myForm) {
//Do whatever you want to do
if(myForm.$valid) {
//some logic
}else {
$scope.submitted = true;
}
}
On the other hand if you don't want to mess up with the controller you can always use FormController method $submitted. This would look like:
<span class="e" ng-show="myForm.$submitted && myForm.dob.$invalid">Please provide a valid date of birth</span>

AngularJs Input textbox allow only greater than zero value

I am trying validate the textbox allow only integer number and greater than zero values.
Here I attached my code.
Html:
<body ng-app="myApp">
NUMBER ONLY <input type="text" allow-pattern="\d" />
</body>
Js:
var app = angular.module("myApp",[]);
app.directive('allowPattern', [allowPatternDirective]);
function allowPatternDirective() {
return {
restrict: "A",
compile: function(tElement, tAttrs) {
return function(scope, element, attrs) {
element.bind("keypress", function(event) {
var keyCode = event.which || event.keyCode; // I safely get the
if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
event.preventDefault();
return false;
}
});
};
}
};
}
Also I tried like this bellow:
<body ng-app="myApp">
NUMBER ONLY <input type="text" allow-pattern="^[1-9][0-9]*$" />
</body>
But its not working.
Check jsfiddle link: click here

You can make use of angular form validation and also use ng-model-options
Here is the link to Codepen
Controller snippet :
var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
$scope.onlyNumbers = /^[1-9]+[0-9]*$/;
})
View :
<div ng-app="app">
<br />
<br />
<div class="col-md-2" ng-controller="myCtrl">
<form name="myForm1">
<div class="form-group" ng-class="{'has-error':myForm1.number1.$invalid}">
<label for="">Following validation happens as the user entrs a value.</label>
<input class="form-control" ng-pattern="onlyNumbers" ng-model="value1" name="number1"/> Valid? {{myForm1.number1.$valid}}
</div>
</form>
<form name="myForm2">
<div class="form-group" ng-class="{'has-error':myForm2.number2.$invalid}">
<label for="">Following validation happens after blur </label>
<input class="form-control" ng-pattern="onlyNumbers" ng-model="value2" name="number2" ng-model-options="{ updateOn: 'blur'}"/> Valid? {{myForm2.number2.$valid}}
</div>
</form>
For more on how you can better this process through controllers refer this link

How to get value of ng-Model into Controller angular js

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