I have created the simple login form and perform the validation on it but the problem is that validation is occur during the page load.My oode here.
<body ng-controller="myCont">
<form name="myForm" novalidate>
<h2 align="center">Add The Item Here</h2>
<table align="center" border="2">
<div class="control-group">
<div class="controls">
<tr>
<td>pid</td>
<td><input type="number" name="pid" ng-model="user.pid" ng-maxlength="3" required="pid" ></td>
<td ng-show="myForm.pid.$touched && myForm.pid.$invalid"></td>
<td ng-show="myForm.pid.$error.required" style="color:red">Enter Pid</td>
<td ng-show="myForm.pid.$error.maxlength" style="color:red">Only 3 digits for pid</td>
</tr>
<tr>
<td>pname</td>
<td><input type="text" name="pname" ng-model="user.pname" required="pname"></td>
<td style="color:red" ng-show="myForm.pname.$touched && myForm.pname.$invalid"></td>
<td ng-show="myForm.pname.$error.required" style="color:red">Pname is required.</td>
</tr>
<tr>
<td>pcost</td>
<td><input type="number" name="pcost" ng-model="user.pcost" required="pcost"></td>
<td style="color:red" ng-show="myForm.pcost.$touched && myForm.pcost.$invalid">
<td ng-show="myForm.pcost.$error.required" style="color:red">Pcost is required.</td>
</tr>
<div ng-repeat="x in result track by $index"></div>
<tr>
<td>AddData<input type="submit" ng-disabled="myForm.$invalid" ng-click="addAll()">
</td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</div>
</div>
</table>
</form>
</body>
enter image description here
try angular-toastr for notification of wrong credentials or error message...
Hope it will help out
Related
here is my html code;
I want to fetch value of first checkbox which is already initialize and the by selecting another checkbox i can get value of first one
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>issued</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueitassets">
<tr>
<td>{{emp}}</td>
<td>
<input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true" />
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS CONTROLLER
I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?
Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee
I'm using Firefox-42.0 and AngularJS v1.4.7.
HTML :
<div class="modal-body">
<p>Select user to share with from the list below.</p>
<div class="form-group">
<label for="">Search:</label>
<input type="text" class="form-control" ng-model="SharedSearchKey" ng-model-options="{ debounce: 600 }" />
</div>
<div class="modal-table" ng-show="usersToShare && usersToShare.length">
<table class="table table-striped table-responsive table-condensed">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>View Only Tasks</th>
<th>Permission</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in usersToShare">
<td ng-bind="row.ContactName"></td>
<td ng-bind="row.UserName"></td>
<td>
<input type="checkbox" ng-model="row.TaskAssign" ng-init="row.TaskAssign=true" />
</td>
<td>
<select ng-model="row.permission" ng-init="row.permission='1'">
<option value="1">Readonly</option>
<option value="2">Write</option>
</select>
</td>
<td>
<input type="checkbox" ng-model="row.selected" ng-click="toggleSelectThisUser(row)" />
</td>
</tr>
</tbody>
</table>
</div>
JS in Controller :
$scope.toggleSelectThisUser = function (user) {
console.log(user);
};
When i change dropdown and click checkBox, it doesn't reflect in $scope. $scope contains the initial value. This problem occurs in Firefox. But it works fine in google chrome.
How to validate the input elements before performing any operation, I have four html input element and html table when you click item on add to list it added item in HTML table now my problem is validation, I want to validate input elements on button click.
<div ng-controller="BookStore">
<br />
<h2>Add New Book</h2>
<div style="border: 1px solid blue;">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" /></td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" /></td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Button" value="Add to list" ng-click="addItem(item)" />
</td>
</tr>
</table>
</div>
<div style="padding-top: 15px;">
<table border="1" class="mytable">
<tr>
<td>ISBN</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total Price</td>
<td>Action</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.ISBN}}</td>
<td>
<span ng-hide="editMode">{{item.Name}}</span>
<input type="text" ng-show="editMode" ng-model="item.Name" />
</td>
<td>
<span ng-hide="editMode">{{item.Price}}</span>
<input type="number" ng-show="editMode" ng-model="item.Price" /></td>
<td>
<span ng-hide="editMode">{{item.Quantity}}</span>
<input type="number" ng-show="editMode" ng-model="item.Quantity" /></td>
<td>{{(item.Quantity) * (item.Price)}}</td>
<td><span>
<button type="submit" ng-hide="editMode" ng-click="editMode = true; editItem(item)">Edit</button></span>
<span>
<button type="submit" ng-show="editMode" ng-click="editMode = false">Save</button></span>
<span>
<input type="button" value="Delete" ng-click="removeItem($index)" /></span></td>
</tr>
<tr ng-show="!(items).length">
<td style="text-align: center" colspan="7">No item exist</td>
</tr>
</table>
</div>
<br />
<div style="font-weight: bold">Grand Total: {{totalPrice()}}</div>
<br />
</div>
Click here to see code
You need to use validation of the form. For this wrap your table into form tag and use ngSubmit directive (or ngClick on the type="submit" button).
In your case you want required constraint added to form fields. Then it makes sense to disable submit button until form is valid ng-disabled="bookForm.$invalid".
All together:
<form novalidate ng-submit="addItem(item)" name="bookForm">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" required />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" required />
</td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" required />
</td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" required />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" ng-disabled="bookForm.$invalid" value="Add to list" />
</td>
</tr>
</table>
</form>
Demo: http://plnkr.co/edit/JIozQNai88dHipaIfeLH?p=preview
i have found the answer i make button disabled when the texboxes are empty
<div class="col-xs-12 col-sm-12">
<button class="btn btn-xs btn-primary" type="button" value="Add To List" ng-disabled="!item.Description || !item.FileName || !item.Path" ng-click="item.Description;addItem(item)">Add</button>
</div>
Click Here to see the plunker code
All other browsers, including IE8, render the form correctly, except IE7; I assume IE6 exibits same problem.
IE7 cuts-off, shrinks the form, and shows about 5% of the input fields;
I removed all css formatting but not change; I have applied several related fixes without success; help or direction as to where to find related information or know fixes is welcome since it has consumed much time without success; thanks;
html is included below;
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IMM log-in</title>
</head>
<body>
<form method="post" name="form" id="form" action="/imm/login.htm" style=
"font-family:arial;font-size:9pt;padding:5px;table.horizontal-align:left;display:inline;">
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><label>log-in ID</label><span class="required">*</span></td>
<td align="left">
<input type="text" name="name" id="form_name" value="" size=
"20" style="width:100%;" />
</td>
</tr>
<tr>
<td align="left"><label>password</label><span class="required">*</span></td>
<td align="left">
<input type="password" name="password" id="form_password"
value="" size="20" style="width:100%;" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table class="buttons" id="form-buttons">
<tbody>
<tr class="buttons">
<td class="buttons"><input type="submit" name="ok" id="form_ok" value=
" OK " /></td>
<td class="buttons"><input type="submit" name="cancel" id="form_cancel"
value="Cancel" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</pre>
Found a solution for this thing position:relative