I have a form where by a user is presented with a "Save Changes" button first, if the user clicks this button and there are no validation issues the user will be presented with a "Confirm Changes" button.
My code to achieve this:
<div class="col-xs-12">
<span ng-hide="confirm">
<button type="button" class="vfnz-submit" ng-click="confirm = ! confirm;">Save changes</button>
<a ng-href="#/huntgroups/" class="vfnz-reset">Cancel</a>
</span>
<div class="hide" ng-class="{ 'hide': ! confirm }">
<button type="submit" class="vfnz-submit confirm-changes">Confirm changes</button>
<a class="vfnz-reset" ng-click="confirm = ! confirm;">Cancel</a>
</div>
</div>
This is working well however, If there are any errors within the form I want the errors to show on "Save Changes". The logic I have to ensure validation shows on submit is like so:
$scope.submitForm = function(form, isValid){
if (!isValid){
$scope.submitted = true;
} else {
$scope.submitted = false;
}
}
I'm unsure what to change or how to achieve the changes I'm after.
Just to reiterate:
On save changes, show error messages if any. If there are error messages, don't show confirm changes. If there are no error messages, show confirm changes and then submit.
you want something like this.... tweak it...
I have a better example but its on my work laptop ... can give it to you tomorrow :)
jsfiddle
<form name="form" no-validate ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
Related
I have a form. Post submit, if the form is invalid, the error props out below the input fields.
One can hide the form using Cancel button.
The form can be displayed again using 'Show Form' button.
But the issue: The old form error still persists.
How can one reset the form without setting the ng-model associated with it as the input fields should be empty during load?
The reset, I should be able to do it from html itself and not from the controller.
Code below:
<form novalidate name="form.customForm">
<div class="form-group">
<div>
<label>Name</label>
</div>
<div>
<input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required && form.customForm.$submitted)">Name cannot be empty</span>
</div>
</div>
<div class="form-group">
<div>
<label>Age</label>
</div>
<div>
<input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required && form.customForm.$submitted)">Age cannot be empty</span>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
Submit
</button>
<button class="btn btn-default" type="button" ng-click="isForm = false;">
Cancel
</button>
</form>
Refer the demo.
I would suggest you write the cancel button logic in the controller, are you sure you want to do it from the html itself?, you can use these statements to reset the form and fields.
form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();
The updated jsfiddle
On click on Cancel button, you could set
form.customForm.$submitted = false;
This will hide the error messages.
Your cancel button becomes:
<button class="btn btn-default" type="button"
ng-click="isForm = false; form.customForm.$submitted = false;">
Cancel
</button>
See jsfiddle
give the form a name:
<div ng-controller="BlaController as vm">
<form name="vm.formOne">
</form>
</div>
And in the controller do this: (thats how I made it work)
if (vm.formOne) {
vm.formOne.$setPristine();
vm.formOne.$setUntouched();
vm.formOne.$commitViewValue();
}
what about just change the cancel button type to "reset" ?? It's the easiest solution
<button class="btn btn-default" type="reset" ng-click="isForm = false;">
Cancel
</button>
$scope.cancel = function(form){
$scope.isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;
}
<button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">
Fiddle Demo
Or
<button class="btn btn-default" type="button" ng-click="isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;" ng-show="!isForm">
Fiddle Demo
I am checking if the username exists in firebase database and I am able to alert the user with a message if its already taken.
how do I disable submit button ?
<form ng-submit="validateForm()" style="margin-left:100px; margin-top:50px;">
<div class="form-group">
<label>User Name</label>
<input ng-model="user.userName" required type="text" class="form-control border-input" placeholder="userName">
<ul ng-repeat="(key,value) in userObject">
<span ng-if="user.userName == key" class="text-danger">User name already exists!</span>
</ul>
</div>
<button type="submit" class="btn btn btn-info btn-fill btn-wd">Save</button>
</form>
You need to change your code to this.
in your controller
if(user.userName == key)
{
$scope.chkuser= true;
}
else
{
$scope.chkuser= false;
}
and set this variable it to ngDisabled on submit button
<button type="submit" class="btn btn btn-info btn-fill btn-wd" ngDisabled="chkuser">Save</button>
NOT DUPLICATED
I have a search with an input, a button and another button to toggle the advanced search:
<form role="form">
<div class="form-group ">
<input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
<div class="btn-group " >
<button type="button" ng-click="search()" class="btn btn-default">Submit</button>
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
<div id="subMenu" class="dropdown-menu advanced-search">
<div class="form-group">
<label for="usr">Find documents with...</label>
<input type="text" class="form-control" ng-model="adSearch.q1">
</div>
<div class="form-group">
<label for="usr">And</label>
<input type="text" class="form-control" ng-model="adSearch.q2">
</div>
<div class="form-group">
<label for="usr">Or</label>
<input type="text" class="form-control" ng-model="adSearch.q3">
</div>
<div class="form-group">
<label for="usr">Not</label>
<input type="text" class="form-control" ng-model="adSearch.q4">
</div>
</div>
</div>
</div>
</form>
When i press the enter key, the button of the advanced search is which takes the action.
I would like to know what can i do to the normal search (the fisrt button) takes the action when i press the enter key.
I do not want use jquery or javascript i need to do it with angularjs, i thought i could do it with just css but seems like i can not.
I can use this:
$scope.onKeyDownEnter = function($event){
if ($event.keyCode === 13) {
console.log("yeeeee");
}
};
But this also toggle the "subMenu", I do not know how to disable the behavior of that "subMenu" when i press the enter key.
Extra information:
Here i have the subMenu before press enter key
Here i have the subMenu after press enter key
I do not know why this code was the cause of this problem:
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
If you have this problem, just add type="button" like this:
<button type="button" class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
And all will work fine
As you have used autofocus in your search input box you can use jquery to get focus on your normal search button:
$(document).ready(function(){
$('#search-button').blur(function(){ $('#save-btn').focus(); });
});
Ps: please give ID to your button save-btn to get this working.
Did you try to apply focus ?
Like this :
$('#myButton').focus();
In my form I used ng-pattern for date, when i entered the wrong pattern and submit the form, its get submitted. Here my code.
<form role="form" name="editForm" ng-submit="saveRecord()">
<label class="control-label">DATE</label>
<input type="text" ng-model="userRecord.date" ng-pattern='/^((0[1-9]|1[012])[\/](0[1-9]|[12][0-9]|3[01])[\/](19|20)[0-9]{2})*$/'
name="date" class="form-control" required/>
<div role="alert">
<span style="color:red" ng-show="editForm.date.$dirty">
<span ng-show="editForm.date.$error.pattern">Incorrect Format, should be MM/DD/YYYY</span>
<span ng-show="editForm.date.$error.required">date is required.</span>
</span>
</div>
<button type="submit" class="btn btn-primary" >Save</button>
</form>
It will display the error also, but if i submit the form its get submited.
I have tried with several searches but could not find solution for this.
You can go down 2 paths:
Disable the form button as long as the form is invalid
You need to check in your form submit function if the form is valid or not
Solution 1
<button type="submit" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
Solution 2
<form role="form" name="editForm" ng-submit="saveRecord(editForm.$valid)">
And now in your controller do the next in the saveRecord function:
$scope.saveRecord = function(valid) {
if(!valid) { return; }
}
I think you have missed novalidate directory in form tag
like
<form role="form" name="editForm" ng-submit="saveRecord()" novalidate>
and edit also validate with submit button like
ng-show="editForm.$submitted && editForm.date.$error.pattern"
ng-show="editForm.$submitted && editForm.date.$error.required"
i hope its help
Below is the code to stop submitting page if pattern does not match
<span class="error" style="color:red" ng-show="externalLinkForm.link.$error.pattern">
Please use hash</span>
To study detail about the validation rule needed in ng-pattern please see the link to get in detail of the validation rules
https://www.w3schools.com/Jsref/jsref_obj_regexp.asp
I have an Angular modal form that I'm styling with Bootstrap. I I want to validate when the user clicks "I Agree." (I don't want to submit the form because it is part of a larger form that will be submitted later.) How can I force this validation when the button is clicked? Also, should the form name be the same as the larger form or have its own name?
Modal:
<form name="agreementForm" novalidate>
<div class="form-group" ng-class="{
'has-error':agreementForm.signature.$invalid && !agreementForm.signature.$pristine
}">
<label class="control-label" for="signature">Signature</label>
<input type="text" id="signature" name="signature" ng-model="agreementForm.contact.signature"
placeholder="Signature (e.g., /John Doe/)" class="form-control" ng-minlength=1 ng-model-options="{ updateOn: 'blur' }" required />
<span ng-show="agreementForm.signature.$error.required && !agreementForm.signature.$pristine" class="help-block">
Please type your signature to agree</span>
</div>
<div class="modal-footer">
<button ng-click="$dismiss()" class="btn btn-warning">Cancel</button>
<button ng-click="$close()" class="btn btn-primary">I agree</button>
</div>
</form>
Would ng-submit solve your issue? For instance,
<form ng-submit="$close()">
<input type="text" ng-model="signature" ng-required="true"/>
<button type="submit">Submit</button>
</form>
It prevents the request being sent to the server and should still perform the validation on the form.