The task is kinda primitive.
I got a simple Angular form with various inputs and I'd like to highlight invalid inputs manually (e.g. on submit action).
I tried to loop over invalid inputs, assuming that they must have some method to highlight an error, but unfortunately they don't.
Same with form. $setDirty() didn't work as well.
I'm using ng-form directive to get access to both form and input.
AngularJS version is 1.2.x.
You form markup should look like, so that when you click on submit ng-class will add submitted class on form that will give you idea that whenever you have submitted class on form and field has ng-invalid class, you can highlight those element
Markup
<ng-form name="form" ng-class="{submitted: submitted}" ng-submit="submitted=true; submit();">
<input type="text" name="firstname" ng-model="formData.firstname">
<input type="text" name="lastname" ng-model="formData.lastname">
<input type="submit" value="submit">
</ng-form>
CSS
.submitted input.ng-invalid {
border: solid 1px red;
}
Use ng-pattern and required it will check you validation. and onSubmiy you can customized your validation also
Example: http://jsfiddle.net/kevalbhatt18/dmo1jg02/
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<input type="submit" value="submit"/>
</form>
</div>
Js
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}
Related
I've a problem with my form. I want to make standard PHP form but AngularJS is blocking the "Submit" button.
When I click the "Submit" button, it returns some errors in console. And remember I don't want to dynamically submit.
The error is:
An invalid form control with name='' is not focusable.
This example
<body ng-app="mainApp">
<form action="post.php" method="post">
<div ng-controller="MainCtrl">
<label for="titlex">Title</label>
<input id="titlex" class="form-control" type="text" maxlength="75" min="10" name="titlex" required>
</div>
<input type="submit" value="Send">
</form>
</body>
This issue pops up in different cases:
You have a hidden form element that has a required attribute for validation.
You hide an form element before send your data.
Some required form elements does not have a name attribute.
Your submit input does not have a name attribute.
You can try to add a name attribute to your submit input:
<input type="submit" value="Send" name="send">
or you can setup your form to be not validated by the browser mechanics by using
<form name="myform" novalidate>
Try adding name attribute in input tag.
Only form elements with a name attribute will have their values passed when submitting a form.
<input type="submit" value="Send" name="send">
Hope this solves your problem.
I have a form with some fields.
I'm validating the fields with css classes:(if the field is invalid and the user touched it, then input's border-color = red.)
select.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched {
border-color: red;
}
If the user submits the form without filling one or more field, there would be a danger alert.
HTML:
<div ng-show="formInvalid>
error!
</div>
JS:
if ($scope.pniyaForm.$valid) {
$scope.formInvalid = false;
.....
} else {
$scope.formInvalid = true;
}
But, If the user submits the form and has not touched any of the field, the css classes don't influence.(because user didn't touch...)
I want to add the class in the code.
Does anyone have an idea for an elegant way to do this without writing it on each field separately?
A possible solution:
when you are executing your form function, add the following line into it.
$scope.$apply(function () {});
this line will cause the ng $scope.$watch() run and apply changes if they exist.
may work, may not work, read the following link for deeper understanding of the issue.
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
Using ng-class validation in angularjs
<div class="form-group">
<label>Name</label>
<input type="text" required ng-model="name" name="name" ng-class="{'has-error': myForm.name.$invalid}" />
</div>
<div class="form-group">
<label>Age</label>
<input type="text" required ng-model="age" name="age" ng-class="{'has-error': myForm.age.$invalid}" />
</div>
If the user submits the form and has not touched any of the field, the css classes don't influence
You need to provide an initial defined value to an ngModel and at least provide the required attribute to an input.
Use ngClass to conditionally apply css classes in case some form parts are invalid
<form name="myform">
<div class="form-group" ng-class="{'has-error': myform.myinput.$invalid}">
<input name="myinput" ng-model="myName" class="...." required>
</div>
....
</form>
....
// in controller
$scope.myName = "cats"; // form is valid
$scope.myName = ""; // form is invalid, and the css class 'has-error' will be applied
Then use ngDisables in your submit button to prevent submission in case the form is invalid
<button type="submit" ng-disabled="myform.$invalid">submit</button>
<form name="v" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter OUTER FORM:
<input type="text" ng-model="text" name="texta" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<form name="x" ng-submit="submitInner()">
Enter text and hit enter INNER FORM:
<input type="text" ng-model="textInner" name="text" />
<input type="submit" id="submits" value="Submit" />
<pre>lists={{listInner}}</pre>
</form>
</form>
example : Plnkr
I have an angular form inside a form. When I select inner field and hit enter, the outer form submit action is called.
I am expecting it to call the inner form submit action
Am I expecting wrong, if yes why? and how to achieve the intended behavior
Below is from angular doc(https://docs.angularjs.org/api/ng/directive/form):
If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will
trigger the click handler on the first button or input[type=submit]
(ngClick) and a submit handler on the enclosing form (ngSubmit)
Nested forms are not allowed per HTML standards, but you could make it working using ng-form directive instead of form element.
For having nested form you need to replace all the inner form's with ng-form and those form which are trans-piled to ng-form would no longer support ng-submit event. You should add those form method on ng-click of button & also change input type from type="submit" to type=button"".
Markup
<form name="v" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter OUTER FORM:
<input type="text" ng-model="text" name="texta" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<ng-form name="x">
Enter text and hit enter INNER FORM:
<input type="text" ng-model="textInner" name="text" />
<input type="button" id="submits" value="Submit" ng-click="submitInner()"/>
<pre>lists={{listInner}}</pre>
</ng-form>
</form>
Plunkr Here
I'm new to Angular, but very old with google.
I cannot find out how to submit this form using Angular, like how we do in jQuery.
<form>
<input type="text" />
<button type="button" class="saveDraft">Save Draft</button>
<button type="submit">Submit</button>
<form>
I want to submit this form from a save draft button, but not a normal submit button.
jQuery we use
$('.saveDraft').click(function () {
$('form').submit(); // this will submit form
});
You could have ng-submit directive on form, When you click on submit button it call the method mentioned in ng-submit directive.
Markup
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<button>Save Draft</button>
<button type="submit">Submit</button>
<form>
Read here for how form work in AngularJS?
Update 1
If you wanted to perform validation of button click but making its type as button itself would be some thing look like below using ng-click directive
Markup
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<button type="button" ng-click="manualSubmit()">Save Draft</button>
<button type="submit">Submit</button>
<form>
Code
$scope.manualSubmit = function(){
//do your the process of adding hidden fields.
//then submit a form
//if you don't want to submit on some cases then put it in condition block
$('form').submit(); // this will submit form
}
But technically I wouldn't prefer to do this approach as using jQuery with make
problem Angular digest cycle.
If you really wanted to add hidden field inside a form, so I would keep them on form itself rather than adding them dynamically before submitting a form. And will use ng-submit directive.
For filling up those hidden values you could use ng-value directive with scope variable in it. What that ng-value directive will do is, it will update the those hidden field, suppose scopeVariable value is changed from controller will update the hidden field value.
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<input type="hidden" name="somehiddenfield" ng-value="scopeVariable"/>
<button>Save Draft</button>
<button type="submit">Submit</button>
<form>
Update 2
As per comment you wanted to submit a form manually using angular, for that you could have directive in place which will submit a form. You don't need ng-submit in such case.
Markup
<button type="button" my-submit="callback()">Save Draft</button>
Directive
app.directive('mySubmit', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.on('click', function(event){
//do stuff before submitting
element.parent.submit(); //manually submitting form using angular
if(attrs.callback)
scope.$eval(attrs.callback);
})
}
}
})
Update 2 Plunkr
Here you have an example:
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
And documentation:
https://docs.angularjs.org/api/ng/directive/ngSubmit
you just replace you code with this
<form name="myForm" ng-submit="submit()" action=" name of other page" autocomplete="on">`
<input name="name" type="text" ng-model="name"/>
<button onClick="draft(this.form)">Save Draft</button>
<button type="submit" name="submit">Submit</button>
Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?
at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.