Validate controls within ng-repeat: textbox and textarea - angularjs

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.

Related

validating controls inside different div in AngularJs

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>

Identify which control has invalid data + AngularJS

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.

Checkbox valiadtion using Angular Js

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

How to disable submit button untill all the fields are filled in a form?

I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE

Angular-ui validation not working in model window

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..

Resources