I have few controls on Angular Js form and submit button. I am also validating if the fields are empty or not. However, even when all data are entered, the form is not getting submitted. Below is the sample code which I have:
Index.cshtml
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
//other controls
<input type="submit" value="Submit" ng-click="submitted=true" />
Is there any identifier or way to check which control has invalid data?
Thanks
For debugging purposes you can just print out the $error property of the form controller:
<pre ng-bind="mainForm.$error | json"></pre>
This will immediately show you which model isn't valid.
Related
I am using AngularJs. I have 2 div, which I am hiding and showing each other. Each div contains few controls, which I have set "required" validation on click of submit button. By default the div "createMenu" is shown. Below is the code used:
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" required="" ng- model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
<div class="container" ng-show="copyView">
<div class="row">
<div class="col-sm-4">
<label class="control-label">New Name :</label>
</div>
<div class="col-sm-4">
<input type="text" required="" maxlength="150" class="form-control" ng-model="NewName" name="NewName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.NewName.$error.required">New Name is required</span>
<input type="submit" value="Submit" ng-click="copydata()" />
</div>
The issue is: If I click on the submit button in the first div, the controls in the div "copyView" is also getting validated. When the first submit button is clicked, I want to validate the textbox available in the "createMenu" div only. when the "copyView" div is shown, than at that time, when the submit button inside that div is clicked, the "New Name" textbox should be validated.
How to differentiate between the two divs, when the error messages are shown.
Thanks
You can use separate form tag for the separate div tag.
like
<div ng-controller="name">
<form>
//first dive
</form>
<form>
//second div
</form>
</div>
I am using Angular js, in which i have a textbox outside and an ng-repeat containing textbox and textarea. I want to check if the fields contain value when submit button is clicked. I am able to achieve the functionality for controls outside ng-repeat, but not sure how to achieve required field validation within ng-repeat, when submit button is click. Below is the existing code:
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
<div ng-controller="testController" ng-init="init()">
<div>
<label>Name :</label>
</div>
<div>
<input type="text" maxlength="150" required ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<div class="row">
<div class="form-group ">
<label>Language</label>
<label>Title</label>
<label>Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div>
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div>
<input type="text" maxlength="150" name="titleValidate[]" ng-model="Descriptions.Title" />
</div>
<div>
<textarea maxlength="500" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) ||testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted=true"/>
How to use required field validation for controls within ng-repeat using angular js?
Thanks
You could use $index to track the name of the different inputs in your ng-repeat.
<div ng-repeat="Descriptions in testsWithDescription ">
<input type="text"
maxlength="150"
name="titleValidate_{{$index}}"
ng-model="Descriptions.Title"
required />
</div>
You can now use the common validations from AngularJS like you already did: mainForm.$valid.
I am working on AngularJS with ui-grid. In the grid when i edit a row I am opening a modal window like this
$scope.editRow = function(row){
var modalInstance = $modal.open({
templateUrl : contextPath+ '/row/edit',
controller : 'EditController',
size : 'lg',
scope: $scope,
resolve : {
result : function() {
return row;
}
}
});
modalInstance.result.then(function() {
.......
});
}
and the model window gets open with the row details after calling Editcontroller default function. Until this point it is working fine.
Now i am trying to do the validation on the opened modal window using AngularUI and the validation is not working. Below is my UI page where the validation is not working
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<h3 align="center">Edit Row Details</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="myform" ng-submit="submitForm(myform.$valid)" novalidate>
<!-- Content Start -->
<div class="container">
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
<label for="name" class="control-label"> Name
</label>
<div>
<input type="text" name="myform.name" class="form-control input-sm"
ng-model="myform.name" placeholder="Name"
required />
<p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div>
<button type="submit" ng-model="myform.save" ng-disabled="myform.$invalid"
class="btn btn-primary" ng-click="edit(myform)">EDIT</button>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</div>
Somebody please help me how to do the validation. one more thing if i open the modal window normally the validation is working but i have the issue when i edit the row. I think this is a scope issue and the child scope is not getting bind. Your help is very much appreciable.
You don't need to include the form name in the name of the input, it's within a form so the input is bound to that form already. I'd also recommend binding your ng-model to another object on your scope (below I've used model) rather then the form itself.
You would write it like this.
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
<label for="name" class="control-label"> Name </label>
<div>
<input type="text" name="name" class="form-control input-sm"
ng-model="model.name" placeholder="Name"
required />
<p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>
</div>
</div>
</div>
Also I'd change the ng-submit to the following
<form class="form-horizontal" name="myform" ng-submit="myform.$valid && submitForm()" novalidate>
Finally, I am able to find the solution
in EditController add below code
$scope.form={};
and your form should have form.myform like this
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<h3 align="center">Edit Row Details</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="form.myform"
ng-submit="submitForm(form.myform.$valid)" novalidate>
<!-- Content Start -->
<div class="container">
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : form.myform.name.$invalid && !form.myform.name.$pristine }">
<label for="name" class="control-label"> Name </label>
<div>
<input type="text" name="myform.name"
class="form-control input-sm" ng-model="myform.name"
placeholder="Name" required />
<p ng-show="form.myform.name.$invalid && !form.myform.name.$pristine"
class="help-block">Name is required.</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div>
<button type="submit" ng-model="myform.save" ng-disabled="form.myform.$invalid" class="btn btn-primary"
ng-click="edit(myform)">EDIT</button>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</div>
I am posting this becoz it may be helpful someone..
I have to validate a form only after click on button. Now it is working on blur and focus. How can I disable focus and blur validation and validate them on button click. fiddle
<form ng-app="form-example" class="row form-horizontal" novalidate>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="input-help">
<h4>Invalid Email</h4>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input ng-model="password" class="immediate-help" required type="password" id="inputPassword" placeholder="Password">
<div class="input-help">
<ul>
<li>required</strong></li>
</ul>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn">Create Account</button>
</div>
</div>
</form>
You could have dummy class on your form level that will tell the form has been submitted or not like ng-class="{submitted: submitted}", and on click of button we will use ng-click="submitted=true" so that after clicking on button form will have submitted class on it. Then we will apply our CSS rule for ng-invalid & ng-dirty to also consider an .submitted class by using concept of deep nesting of classes.
/* Show red border when stuff has been typed in, but its invalid */
.submitted .ng-dirty.ng-invalid {
border-color:#ec3f41;
}
Other CSS rules should be taken care of this thing like I shown above.
the problem is that you just added the validation and you're showing the message on ng-invalid ( with css). here is an example of working code to do what you want.
<div class="form-group col-xs-12 required" ng-class="{ 'has-error' : creditCardDetailsForm.security_code.$invalid && submitted}">
<label class="col-lg-28 col-l-5 col-md-5 text-left font-l-20 primary control-label">Security code (CVC) </label>
<div class="col-lg-3 col-md-4 text-left">
<input class="form-control" name="security_code" data-stripe="cvc" ng-model="payment_details.security_code" type="number" minLength="3" required>
<p ng-show="creditCardDetailsForm.security_code.$invalid && submitted" class="help-block">Security code is required.</p>
<p ng-show="creditCardDetailsForm.security_code.minLength.$invalid && submitted" class="help-block">Invalid CVC.</p>
</div>
</div>
see, here I check if the form is invalid and the submitted has been clicked...
in my controller:
$scope.purchasePackage = function (status, response) {
$scope.submitted = true;
if ($scope.creditCardForm.creditCardDetailsForm.$valid) {
//do something
}
};
since you did your hide and show with CSS you can just add the class on click to the form and then do .submitted .ng-invalid so it only shows up after you have submitted.
Here's FIDDLE
Not able to understand that why the required validation is not working ??
HTML
<div ng-app="app">
<div ng-controller="myctrl">
<form name="myform" class="form form-horizontal" novalidate>
<fieldset class="fieldset" ng-show="payment == 'bankAccount'" class="form-group clearfix">
<ul class="form-group">
<li ng-class="{
'has-error': myform.routingNumber.$invalid,
'has-success':myform.routingNumber.$valid}">
<label for="routingNumber">Bank Routing Number</label>
<div class="" ng-show="myform.routingNumber.$error.required"> <span class="help-block">Please enter routing number</span>
</div>
<input type="text" name="routingNumber" class="form-control" required/>
</li>
</ul>
</fieldset>
</form>
</div>
</div>
JS
var app = angular.module('app', [])
You need to provide an ng-model for the angular validation on the form to kick in.
Try:-
<input type="text" ng-model="routingNumber" name="routingNumber" class="form-control" required/>
On a side note:- there is no use of using label for without using id on the target input.
Demo