We are new to angular and we wanted to use angular validations with our forms. We are using async ajax calls with a kendo grid to get, create, edit and save data without any submit. I am having a hard time figuring out how to reset the validation state of the form when the user chooses to create a new record.
I made this small exaple, trying anything I could find in sof without any luck so far:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<div ng-app="app">
<div ng-controller="ValidationController">
<form name="myForm" novalidate>
<label>
Name
<input name="nombre"
ng-model="field"
required />
</label>
<div ng-messages="myForm.$error">
<div ng-message="required" ng-if="myForm.nombre.$touched" ng-messages-include="myMessages">
</div>
</div>
<button type="button" ng-click="reset(myForm);" value="Reset">reset validation</button>
</form>
<script type="text/ng-template" id="myMessages">
<div ng-message="required">required field</div>
</script>
</div>
</div>
<script>
angular.module('app', ['ngMessages']).controller("ValidationController", function ($scope, $window) {
$scope.reset = function (form) {
form.$setPristine();
form.$setUntouched();
form.$setValidity();
form.nombre.$setPristine();
form.nombre.$setValidity();
form.nombre.$setUntouched();
}
});
</script>
Here is my fiddle:
https://jsfiddle.net/yh9q1a2j/
Update:
I think this better suits your needs. I've updated the fiddle
https://jsfiddle.net/n7qqn1x6/6/
In your reset method call $setPristine along with clearing the formData object.
$scope.formData = {};
$scope.myForm.$setPristine();
To get the error messages to be removed from the page once added I had to use ng-show instead of ng-if
<div ng-show="myForm.nombre.$error.required&&myForm.nombre.$dirty">required</div>
Related
In Angularjs 1 there are many examples of validation on submit OR on user input.
In this project I need to update the validation messages on user clicks submit button only, i.e, the USER INPUT WILL NOT UPDATE THE VALIDATION MESSAGES (client spec).
Example: http://embed.plnkr.co/N0rRBS8AXU3jQJjQidIT/
It seems you only need validation on the controller, so to turn off html validation you need novalidate like this in your html:
<form name="yourForm" ng-controller="YourController as yourCtrl" ng-submit="yourCtrl.yourmethod(data)" novalidate>
then you proceed to do your validations in your controller
Here is my option:
(function(){
'use strict';
var app = angular.module('sample', []);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sample">
<form name="userRegister" novalidation>
<div ng-messages="userRegister.name.$error.required"
ng-if="submitted ">
<p ng-message="required">I need your name Sr</p>
</div>
<input type="text" ng-required name="name" ng-model="user.name">
<input value="Send" type="submit" ng-click="submitted=true"/>
</form>
</div>
I've an angularjs form with validations set. I want to unhide it on click of show button and hide it on click of hide button.
If I play with the input fields and hide and then again unhide, I still see the validation messages which I don't want. Please help me in solving this issue.
Code is as below:
Index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body { padding-top:30px; }
</style>
<!-- JS ===================== -->
<!-- load angular -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="script.js"></script>
</head>
<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header"><h1>AngularJS Form Validation</h1></div>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<button type="button" ng-click="unhide()" class="btn btn-primary">Show</button>
<form ng-show="showForm" name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" ng-click="hide()" class="btn btn-primary">Hide</button>
</form>
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>
script.js:
// app.js
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
alert(isValid);
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
$scope.hide = function(){
$scope.showForm = false;
}
$scope.unhide = function(){
$scope.showForm = true;
$scope.userForm.$setUntouched();
}
});
Below is the plunker link:
http://plnkr.co/49k8P0
To achieving the behaviour what expect, you need to do several changes in your code.
All the form field should belong to one object, like create one object which would $scope.user = {} and then place all user related fields inside your user object like user.username, user.name and user.email so that while clearing form you could directly do user = {}
While hiding for you need to clear a form object, Here the form object would be the name of the form which userForm.
OR
More simpler solution would be use ng-if instead of ng-show. Which will add and remove DOM on basis of showForm value.
Demo Here
If you still want to keep the previously entered data in the fields but only clear the messages then add a variable to scope that is set to true when the form is submitted. The validation messages are only shown when the variable is true. You can then set it to false when you hide. This means that when the form is shown again the messages are hidden.
$scope.hide = function(){
$scope.showForm = false;
$scope.submitted = false;
}
Plunker: http://plnkr.co/edit/dnBu0mD9RLvLdVJJKBGe
I have a form like this:
<form action="http://my-action-url">
...
</form>
How do I include use a variable to set the "action" url to be equivalent to say a variable in my controller:
$scope.actionURL = "http://my-action-url";
?
I am currently doing:
<form action="{{actionURL}}">
...
</form>
However, when I inspect element, i see the action tag is empty.
here is the code available to set action in a form using an angularJs scope variable. i have successfully run this code. please check this.
Here Submit will not work because stackoverflow does not allow to submit. for more detail you can see this error in console
angular.module("test",[]).controller("testAction",testAction);
function testAction($scope) {
$scope.actionURL = "http://www.google.com";
$scope.testD = function() {
location.href = $scope.actionURL;
};
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
</head>
<body ng-app="test">
<div ng-controller="testAction">
<form ng-submit="testD();">
<input type="submit" >
<div>{{actionURL}}</div>
</form>
</div>
</body>
</html>
You may write the form with
$sce.trustAsHtml(html);
by yourself
Edit : better use
<form action="{{trustAction(your post url)}}">
and in your scope write
$scope.trustAction = function (actionURL) {
return $sce.trustAsResourceUrl(actionURL);
};
You can see here https://docs.angularjs.org/api/ng/directive/form
Angular prevent action and due to that you have to use
ng-submit or ng-click
as http://dojo.telerik.com/EmEki
I used jquery selector to set the form action.
<form method="post" name="deleteForm" action="#">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete') }}">
<md-button ng-click="closeDialog()" class="md-raised md-primary md-button md-ink-ripple">
Cancel
</md-button>
<md-button type="submit" class="md-raised md-warn md-button md-ink-ripple">
Delete
</md-button>
</form>
And in my controller:
$('form[name="deleteForm"]').attr('action', '/manager/card-design/' + cardDesign.id);
How'd I get the value to controller from a nested view? I'd like to mention that I have a recursive approach.
HTML
<textarea ng-model="inputValue" class="ng-valid ng-dirty ng-valid-parse ng-touched"></textarea>
Full HTML structure can be found here
Edit:
I want to get the value of the textarea in my controller. (e.g. $scope.inputValue ); currently getting undefined
see this jszfiddle
http://jsfiddle.net/7qbucc62/
<div ng-app="app">
<div ng-controller="firstController">
<textarea ng-model="inputValue"></textarea>
<textarea ng-model="inputValue"></textarea>
</div>
</div>
<script>
(function abc()
{
var app=angular.module("app",[]);
app.controller("firstController",function($scope)
{
$scope.inputValue="";
});
})();
</script>
I think this is what you are asking
you can use $scope.inputValue directly in your controller. It will provide you the value of textarea
I am trying to access the model of a form element that is using validation (e.g. ng-minlength).
It seems that the model is undefined until the validation passes.
Is this the intended behaviour? How can I access a non-valid model?
Example: http://jsfiddle.net/ybdssvt5/
<div ng-app="myapp">
<form name="myForm">
<input type="text" ng-minlength="5" ng-model="formData.email" required/>
<div>EMAIL length: {{ formData.email.length }}</div>
</form>
</div>
EMAIL length cannot be displayed until validation passes.
you can plug in a controller and assign a default value,
var app = angular.module('myapp', [])
.controller('appCtrl', function($scope){
$scope.form = {};
$scope.form.email = '';
});
This is a dirty way, but you can improvise from here easily.
Also you need to add ng-controller="appCtrl" to your ng-app div or form.