Expected: After Entering Valid Email ID pattern button should be enabled.
Happened: After Entering Valid Email ID button goes disabled.
This is my Input textfield in HTML:
<form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>
This is my AngularjS Script :`
var myApp1=angular.module('myApp',[]);
myApp1.controller('myController',['$scope',function($scope)
{
$scope.submit=function(c)
{
}
}]);
First add a name to your form and to your input:
<form name="myForm" class="form-inline">
<input type="email" name="emailID" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
Then change your ng-disabled:
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>
$dirty is added because we want the user to actually enter an value before we enable. Or you can add required on your input if its a compulsory input field.
Also refer: http://www.w3schools.com/angular/angular_validation.asp
Related
When I reload the browser and show login page. Two input field for username and password are autofill with chrome.
But the login button is greyout and show "not allowed" cursor when hover on.
If I click anywhere in the page, the login button will be enable.
Here is my code for login form:
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
</form>
You may try autocomplete false.
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address" autocomplete="false">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password" autocomplete="false">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
I'd like to use the GTM blacklist feature for only not send the input values of the HTML input fields that belongs to a specific class.
So far I've been able to blacklist all the clicks, but this is just too much.
In the below example, I'd like not to send the inputPassword input (see the gtm-blacklist class)
<form novalidate="" class="ng-pristine ng-valid-email ng-invalid ng-invalid-required" name="form_login" ng-submit="login(user)">
<div class="form-group">
<!--<label class="control-label" for="inputEmail"> Email</label>-->
<input class="form-control ng-pristine ng-untouched ng-valid-email ng-invalid ng-invalid-required" type="email" id="inputEmail" placeholder="Email" ng-model="user.email" ng-initial="" required="">
<div class="field-underline"></div>
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched gtm-blacklist" type="password" id="inputPassword" placeholder="Password" ng-model="user.password" ng-initial="" required="">
<div class="field-underline"></div>
</div>
<div class="form-group">
<button type="button" class="forgot-pass btn btn-link">Forgot password</button>
<button type="button" class="show-new-customer btn btn-link">Create an Account</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-primary btn-login" disabled="disabled" ng-disabled="!user.email || form_login.$error.email"> Sign in</button>
</div>
</form>
Unfortunaltley, that isn't how the blacklist works.
The blacklist is for restricting which tags, triggers, and variables are allowed on a page.
To stop users with GTM access from scraping passwords, you could instead restrict the use of custom HTML and custom JavaScript on your login page.To do this, blacklist the customScripts class.
dataLayer = [{
...
'gtm.blacklist': ['customScripts']
}];
This works because none of the inbuilt variables will return an input value.
My html is
My html is
<form name="signInForm" novalidate="">
<div class="form-group has-feedback has-feedback-left">
<label class="control-label sr-only">Email address</label>
<input type="email" class="form-control" name="username" placeholder="Email address" required="" data-ng-model="user.username" data-ng-trim="false"/>
</div>
<div class="form-group clearfix">
<div class="pull-right">
<button type="submit" class="btn btn-primary submit-button" data-ng-click="signIn()">
<span class="submit-button-text">Sign in</span>
</button>
</div>
</div>
</form>
Controller :
$scope.signIn = function(isValid) {
$log.log("username is" + $scope.user.username + $scope.user.password);
}
when I clicked sign in button , mu user name white spaces are trim off. But I want that white spaces in my user name should retain so that I can track it and displayed error message.
So I used 'data-ng-trim = false' .
But it seems its not working.
Please help.
Unfortunately there ng-trim doesn't apply to input type="email". What you can do is change the input to type="text" in order to use the ng-trim, but this solution is not ideal.
See the Angular documentation for input type=email
You have to use ng-trim="false":
<input type="email" class="form-control" name="username"
placeholder="Email address" required=""
data-ng-model="user.username"
ng-trim="false"/>
If it is not working for you, please update you angularjs version here.
Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo