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>
Related
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.
I am using Angular js, in which i have a textbox and collection of checkbox. I want to check if atleast one checkbox is checked when the submit button is clicked. 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>
<label>Delivery Method</label>
</div>
<div ng-repeat="method in deliveryMethods">
<input type="checkbox" id="{{method.id}}"
value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
ng-click="toggleSelection(method.value)" ng-required="value.length==0"> {{method.value}}
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted=true"/>
How to achieve this in angular js?
Thanks
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.
Is there an ng-show expression I can use to only validate this textbox only when the submit button is clicked? Currently, it's displaying the error message while the user is typing into it.
<div ng-show="!vm.validEmployerCode && !form.EmployerCode.$error.required" class="errorMessage">
You have entered an invalid code
</div>
<div class="row">
<div class="col-xs-11">
<div class="form-group">
<label class="form-label" for="Code">Code</label>
<input ng-model="vm.code" name="Code" type="text" required id="Code" />
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="submit" class="btn btn-success col-md-4">
Sign Up
</button>
</div>
</div>
You could check $submitted flag inside your form object, basically that will become a true once you submit the form. So you need to add form.$submitted inside ng-show directive.
Markup
<div ng-show="form.$submitted && !vm.validEmployerCode && !form.EmployerCode.$error.required"
class="errorMessage">
You have entered an invalid code
</div>
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.