<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="myForm.job.$touched && myForm.job.$invalid">
</span>
<button class="btn" type="button" ng-click="myForm.$valid && submitUser()">Done
</button>
I want to show message on both untouched and button click, but it is showing only on touched and also form must not be submitted as it is working.
Check this one
<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="(myForm.job.$untouched || myForm.$invalid)">
<button class="btn" type="button" ng-click="myForm.$valid && submitUser()">Done</button>
First change your button code to this:
<button class="btn" type="button" ng-click="submitUser()">Done</button>
change your span code to
<span ng-show="myForm.job.$touched || buttonClicked">
In your Controller:
$scope.buttonClicked = false; // Set it to false on initial load
$scope.submitUser = function(){
..................
$scope.buttonClicked = true;
..................
}
You could use $submitted in a below combination, but for the same you to submit form, that you're not doing. So
<form name="myForm" ng-submit="myForm.$valid && submitUser()">
<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="(myForm.job.$touched || myForm.$submitted) && myForm.job.$invalid">
My Error
</span>
...
...
<button class="btn" type="submit">Done</button>
</form>
You can check for $touched in the input elements and button click evaluated using a variable.
var ang = angular.module("app", []);
ang.controller("ctrl", function($scope){
$scope.submitUser = function(){
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app">
<form name="myForm">
<input type="text" name="job" ng-model="job" required class="form-control" >
<span ng-show="myForm.job.$touched ||show">Error</span>
<button class="btn" type="button" ng-click="myForm.$valid ? submitUser() : (show=true)">Done</button>
</form>
</div>
Change the button to set the $touched status of the control:
<button class="btn" type="button"
ng-click="myForm.job.$setTouched(); myForm.$valid && submitUser()">Done
</button>
Then the message will show when the button is clicked.
The DEMO
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<h1>myForm</h1>
<form name="myForm">
<input type="text" ng-model="job"
required class="form-control" name="job">
<span ng-show="myForm.job.$touched && myForm.job.$invalid">
Enter valid job
</span>
<button class="btn" type="button"
ng-click="myForm.job.$setTouched(); myForm.$valid && submitUser()">Done
</button>
</form>
<br>myForm.job.$touched = {{myForm.job.$touched}}
<br>myForm.job.$invalid = {{myForm.job.$invalid}}
</body>
Related
I'm trying to disable a button using AngularJS
<button
type="submit"
ng-disabled="emailConfig.$invalid"
ng-click="createEmailconfig()"
class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
name="submit"
id="submit"
>
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
If the form is invalid or a specific length isn't met, the button should be disabled. However, it's not working as it's supposed to.
Can someone help me out?
all you need to do is add ng-maxlength directive to the input fields and the form will be disabled with your current code, checkout this basic working example!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<input name="input" ng-model="userType" ng-maxlength="5" required>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
</form>
</div>
some addition to #Naren Murali answer
You have no ng-model and inputs in your example.
You can validate a field using the required attribute and ng-model.
Using ng-model:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button>
</form>
</div>
note: Set the novalidate attribute on the form-tag so the default HTML5 validation gets overwritten by Angular in your app.
You can validate a form using the required attribute and the form name.
For your example:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>
My angularjs validation in .NET MVC cshtml files isnt working.
Below is my code:
cshtml code:
<div id="addEditItem" class="modal" role="dialog">
<form novalidate role="form" name="frmItem">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Item Details</h4>
</div>
<div class="modal-body">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-if="frmItem.name.$error.required && frmItem.name.$dirty">*</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="submit" class="btn btn-success" ng-click="SaveItem()"><i class="fa fa-save"></i> Submit</button>
</div>
</div>
</div>
</form>
</div>
Controller Code:
medApp.controller("itemController", function ($scope, itemService) {
$scope.SaveItem = function () {
var itemModel = {
Id: $scope.id,
Name: $scope.name,
Description: $scope.description,
Manufacturer: $scope.manufacturer,
BatchNo: $scope.batchNo,
ExpiryDate: $scope.expiryDate
};
if (!CheckIsValid()) {
alert('Please fill the detail!');
return false;
}
var requestResponse = itemService.AddEdit(itemModel);
Message(requestResponse);
};
function CheckIsValid() {
var isValid = true;
if ($('#name').val() === '' || $('#description').val() === '' || $('#manufacturer').val() === '' || $('#batchNo').val() === '') {
isValid = false;
}
return isValid;
}
});
The addEditItem is a modal dialog. If I click on submit the alert('Error in getting records'); is shown.
I want the validation to happen at cshtml level rather than the java alert.
I am going to remove the CheckIsValid function. I want the validation to happen only in cshtml file.
Any idea what's going on?
In your attached cshtml code I could find the "name" id only, but your check function is also checking"description", "manufacturer" and "batchNo". All of those item must be exist otherwise the function returns with false.
The CheckIsValid() function will return true when all items exists and contains at least one character. Anyway the good start is to put a breakpoint into your check code and see why returns with false.
Wordking fiddle
<form name="myForm">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-show="myForm.name.$error.required && !myForm.name.$valid">*</span>
</div>
<button ng-click="display()">Log</button>
</form>
Would like to add that you need to add:
Use name on inputs to be accesable from the scope
Use ng-show/ng-hide for validation since it changes alot
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>
This question already has answers here:
show validation error messages on submit in angularjs
(13 answers)
Closed 7 years ago.
I am dynamically adding fields and want "required" validation on each field I add.
Problem is angular validates these fields before i submit.
<form name="outerForm">
<div ng-repeat="item in items">
<data-ng-form name="innerForm">
<input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required>
<span class="error" ng-show="innerForm.fieldU.$error.required">
Required!
</span>
<input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required>
<span class="error" ng-show="innerForm.userName.$error.required">
Required!
</span>
</data-ng-form>
</div>
<input type="submit" ng-click="save(items)" ng-disabled="outerForm.$invalid" />
<button ng-click="add()">New Field</button>
</form>
here is fiddle
https://jsfiddle.net/Lbw6ow8k/7/
I want required msg only to show when user did not add anything to text box and after he/she clicked submit
I'd love to maintain one scope variable which will keep a track that form is submitted or not
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<form name="outerForm" ng-init="submitted=false" novalidate="">
<div ng-repeat="item in items">
<data-ng-form name="innerForm">
<input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required/>
<span class="error" ng-show="$parent.submitted&& innerForm.fieldU.$error.required">
Required!
</span>
<input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required/>
<span class="error" ng-show="$parent.submitted && innerForm.userName.$error.required">
Required!
</span>
</data-ng-form>
</div>
<input type="submit" ng-click="submitted=true;save(items)" ng-disabled="submitted && outerForm.$invalid" />
<button ng-click="add()">New Field</button>
</form>
Items: {{items}}
</div>
Working Fiddle
You can create a $scope.isSubmit variable to detect whether the form has submitted or not:
Controller:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.save = function (question) {
$scope.isSubmit = true; // Will be true if the form has submitted
console.log(question)
}
$scope.items = [];
$scope.add = function () {
if ($scope.items.length >= 10) {
toastr.warning("Only 10 fields are allowed");
} else {
$scope.items.push({
//inlineChecked: false,
question: "",
questionPlaceholder: "foo",
text: ""
});
}
};
});
View:
<div ng-app="myApp" ng-controller="myCtrl">
<form name="outerForm" novalidate>
<div ng-repeat="item in items">
<data-ng-form name="innerForm">
<input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required> <span class="error" ng-show="innerForm.fieldU.$error.required && isSubmit">
Required!
</span>
<input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required> <span class="error" ng-show="innerForm.userName.$error.required && isSubmit">
Required!
</span>
</data-ng-form>
</div>
<input type="submit" ng-click="save(items)" />
<button ng-click="add()">New Field</button>
</form>Items: {{items}}</div>
So, I deleted the ng-disable in the button in order to make the submit button clickable even though the form isn't correct. Moreover, you should add novalidate into the form tag to disable the default form validation from HTML5.
Here is the full source code on JsFiddle.