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.
Related
I'm new at Angularjs and my question is how to display an error message when the password doesn't match with confirm password?
Can someone help me, this is not very difficult but I'm still learning to programme.
Thanks to everyone!
I have html code:
<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" id="password" ng-model="activeItem.passwordString" />
</div>
<div class="form-group">
<label for="password">Confirm Password</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm" />
</div>
<p ng-show="(userForm.passwordConfirm != '') && (userForm.password != userForm.passwordConfirm)">Passwords don't match</p>
</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>
And angular function:
$scope.saveItem = function(){
console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.activeItem.username,
//password: $scope.activeItem.password,
name: $scope.activeItem.name,
id: $scope.activeItem.id
};
if($scope.activeItem.passwordString != ''){
if($scope.activeItem.passwordString == $scope.activeItem.passwordConfirm){
objectToSave.password = $scope.activeItem.passwordString;
} else {
console.log('Confirm password error');
}
}
You'll want to keep different Id's for the two password fields, also take a look at your model bindings:
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
<input type="text" class="form-control" id="passwordConfirm" ng-model="activeItem.passwordConfirm" />
You can just reference the items that are bound with ng-model within an ng-if/ng-show, and then you shouldn't need any custom logic on the back-end.
<p ng-show="(activeItem.passwordString && activeItem.passwordConfirm) && activeItem.passwordString
!== activeItem.passwordConfirm ">Passwords don't match</p>
Also, you'll probably want to use '!==' over '!=' since you're just comparing two strings, as it's more strict of a comparison.
Edit: one thing to note, with this direction you'll still probably want to do error checking in the save function, but this should handle displaying the error message without any issues.
Remember the operator for 'not equal' is "!==", with that you will be able to make it!
This question already has answers here:
Resetting form after submit in Angularjs
(5 answers)
Closed 4 years ago.
When i am click add button for add records in next time then last form data is present in form it is not clear in bootstrap form model.
$scope.saveAdd = function () {
$http({
method: 'post',
url: 'user/insert',
data: $scope.form,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data)
{
if (data == 1) {
$scope.user_succ = $scope.user_succ ? false : true;
$scope.succ = "User added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
} else if(data == 3) {
$scope.confirm_password=$scope.confirm_password ? false :true;
$scope.confirm_password_error="Confirm Password is Not Matched";
}else{
$scope.user_err = $scope.user_err ? false : true;
$scope.err = "User insertion failed! Try again.";
}
});
};
My View page:-
This is my view page that is load from angularjs routes.js.If you found any error error please give me some feedback.or any others angularjs validation you have please share with me.
<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-form-label">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.name" id="name" name="name" placeholder="Enter Name" required>
<span style="color:red" ng-show="addItem.name.$touched && addItem.name.$invalid">Please Enter User Name.</span>
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone Number<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.phone" id="phone" name="phone" placeholder="Enter Phone Number" required="">
<span style="color:red" ng-show="addItem.phone.$touched && addItem.phone.$invalid">Please Enter Phone Number.</span>
</div>
<div class="form-group">
<label for="usertype" class="col-form-label">User Type<span class="text-danger">*</span></label>
<select class="form-control" ng-model="form.type" id="type" name="type" required="">
<option value="">Select a user type</option>
<option value="branch">Branch Admin</option>
<option value="manager">Branch Manager</option>
</select>
<span style="color:red" ng-show="addItem.type.$touched && addItem.type.$invalid">Select User Type.</span>
</div>
<div class="form-group">
<label for="address" class="col-form-label">Address</label>
<textarea class="form-control" ng-model="form.address" id="address" name="address" placeholder="Enter Address" required=""></textarea>
<span style="color:red" ng-show="addItem.address.$touched && addItem.address.$invalid">Please Enter Address.</span>
</div>
<div class="form-group">
<label for="username" class="col-form-label">Username<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.username" id="username" name="username" placeholder="Enter Username" required="">
<span style="color:red" ng-show="addItem.username.$touched && addItem.username.$invalid">Please Enter Username.</span>
</div>
<div class="form-group">
<label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
<input type="password" class="form-control" ng-model="form.password" placeholder="Password" name="password" required="required" ng-minlength="6"/>
<div ng-if="addItem.password.$touched || signupSubmitted">
<p style="color:red" ng-show="addItem.password.$error.required" class="help-block">Password is required</p>
<p style="color:red" ng-show="addItem.password.$error.minlength" class="help-block">Minimum 6 character</p>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Confirm Password<span class="text-danger">*</span></label>
<input type="password" class="form-control" name="confirm_password" ng-model="form.confirm_password" placeholder="Confirm password" match-password="password" required>
<div ng-if="addItem.confirm_password.$touched || signupSubmitted">
<p style="color:red" ng-show="addItem.confirm_password.$error.required" class="help-block">Confirm password is required</p>
<p style="color:red" ng-show="confirm_password" >{{confirm_password_error}}</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>`
You can try reset function which reset your form fields. But this is not the accurate solution. Please provide your Complete controller and HTML code to make an accurate solution.
$scope.resetForm = function(){
/* reset the data to a new object so that all the properties
* of form are reset
*/
$scope.data = {};
};
UPDATE
Based on the partial HTML code, you can try form controller API setPristine: $scope.FORMNAME.$setPristine();
Replace FORMNAME with your form name. Also make note that as your form is binding a model object to your inputs so, you need to take care of clearing those input model as well:
$scope.formData = {};
Hope this will help to solve your point :)
The reason is that your previous value that you bind with model is still there. So, you can do either of 2 things:
Inject $route in controller and do $route.reload() on ng-submit and the route is reloaded.
Reinitialize the model by creating and calling a function which clears the data.Use $scope.formName.$setPristine() if you have validation depending on this pristine state of form
NOTE: $route.reload() will reload your route, so all the changes which have in your controller will be reverted. So choose accordingly.
Its Work.With Minor Change.
$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine();
$scope.NameofFormSubmitted.$setUntouched();
I think what you are looking for is:
$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine();
$scope.NameofFormSubmitted.$setUntouched(); // resets touch events
I am doing one register page using angularjs.
Follows my html code:
<form name="frominline" action="post" class="clearfix form-hidden" id="Register-form">
<div class="col-md-12">
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="text" name="userid" autocomplete="off" id="username" class="form-control" required autofocus="" ng-model="user.name" ng-minlength="3" ng-maxlength="12" ng-model-options="{ allowInvalid: true }">
<label class="blmd-label">User Id</label>
</div>
<p class="login-error" ng-show="frominline.userid.$dirty && frominline.userid.$error.required">
<span style="color : red">required</span>
</p>
<p ng-show="frominline.userid.$error.minlength" class="help-block" style="color:red;">Username is too short.</p>
<p ng-show="frominline.userid.$error.maxlength" class="help-block" style="color:red;">Username is too long.</p>
</div>
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="email" name="email" autocomplete="off" id="email" class="form-control" required autofocus="" ng-model="user.email">
<label class="blmd-label">Email</label>
</div>
<span class="login-error" ng-show="frominline.email.$error.required && frominline.email.$dirty" style="color:red;" ng-model-options="{ allowInvalid: true }">required</span>
<span class="login-error" ng-show="!frominline.email.$error.required && frominline.email.$error.email && frominline.email.$dirty" style="color:red;">invalid email</span>
</div>
<button type="reset" ng-click="resetform(frominline)">reset</button>
</form>
My js code:
app.controller('loginCtrl'['$scope',function('$scope'){
var user = this;
$scope.resetform(form){
user.name='';
user.email='';
$scope.frominline.$dirty = false;
$scope.frominline.$pristine = true;
$scope.frominline.$submitted = false;
}]);
Now, in first image, those are the validation errors.
Now, I hit the reset button and the validation errors are gone but in the second image I got required field.
Can you please help me removing or reseting the whole form on a button click?
I tried with many options like $setPristine() or $setValidity() but i can't fix this issue "required" error message.
Follows the image of the form with only required error message after clicking reset button:
The form is probably cleared, but those input fields are not. When you are display the error for a particular field (e.g. ng-show="frominline.userid.$error.minlength") include the state of the form as well (e.g. ng-show="frominline.$submitted && frominline.userid.$error.minlength").
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
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>