I've got a problem with angular ui-utils, specifically ui-validate. I'm trying to supply a user with a password change form and to require "new password" and "confirm new password" to match, here:
<table class="table">
<form>
{{!!passwordForm.newPassword2.$error.validator}}
<tr>
<th>Current password: </th>
<td><input type="text" name="currentPassword" ng-model="passwordForm.currentPassword"></td>
</tr>
<tr>
<th>New password: </th>
<td><input type="password" name="newPassword" ng-model="passwordForm.newPassword"></td>
</tr>
<tr>
<th>Confirm new password:</th>
<td><input type="password" name="newPassword2" ng-model="passwordForm.newPassword2" ui-validate=" '$value==passwordForm.newPassword' " ui-validate-watch=" 'passwordForm.newPassword' "></td>
</tr>
<tr>
<td/>
<td>
<button type="button" ng-click="sendChangePassword()" ng-disabled="passwordForm.newPassword2.$error.validator" class="btn btn-primary">Save</button>
</td>
</tr>
</form>
</table>
and in my controller I have
$scope.passwordForm = {
currentPassword: "",
newPassword: "",
newPassword2: ""
};
The problem is, no matter whether or not newPassword and newPassword2 match, the save button stays enabled and {{!!passwordForm.newPassword2.$error.validator}} evaluates to false.
I've gone through several stackoverflow threads and other sources already, but I just can't figure out what's wrong with my code. Any help would be appreciated.
First make sure you have registered ui-utils properly by adding 'ui.utils' in your app registration like
angular.module("plunker", ['ui.utils']);
then there are some problems with the Html you have posted, first your form is nested inside of a table and this is not valid, so I moved it outside the table and I also provided the form a name
<form name="myForm">
<table class="table">
{{!!myForm.newPassword2.$error.validator}}
<tr>
<th>Current password:</th>
<td>
<input type="text" name="currentPassword" ng-model="passwordForm.currentPassword">
</td>
</tr>
<tr>
<th>New password:</th>
<td>
<input type="password" name="newPassword" ng-required="true" ng-model="passwordForm.newPassword">
</td>
</tr>
<tr>
<th>Confirm new password:</th>
<td>
<input type="password" name="newPassword2" ng-required="true" ng-model="passwordForm.newPassword2" ui-validate=" '$value==passwordForm.newPassword' " ui-validate-watch=" 'passwordForm.newPassword' ">
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button" ng-click="sendChangePassword()" ng-disabled="myForm.newPassword2.$error.validator" class="btn btn-primary">Save</button>
</td>
</tr>
</table>
</form>
I also added ng-required to the two new password fields as that would be needed to not allow a blank password and finally in your buttons ng-disabled attribute reference the actual form name instead of your object to find the validator.
this should fix it, I have a working example here
Related
I'm new to angularJS and trying to update a row of data in the view but somehow it appears not to do anything. the goal is to render the new row of data into my table.
thanks a lot!
myBankApp.controller("displayClients",function($scope,$http){
$http.get('/data/clients.json').then(function(response){
$scope.list= response.data;
});
$scope.addClient=function(){
$scope.list.push({
name: $scope.client.name,
lastName: $scope.client.lastName,
bankAccountNumber: $scope.client.bankAccountNumber,
balance:$scope.client.balance
})
$scope.client.name="";
$scope.client.lastName="";
$scope.client.bankAccountNumber="";
$scope.client.balance="";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="displayClients">
<table>
<tr>
<th>first name</th>
<th>last name</th>
<th>account number</th>
<th>balance</th>
</tr>
<tr ng-repeat= " x in list">
<td> {{x.name}}</td>
<td> {{x.lastName}}</td>
<td> {{x.bankAccountNumber}}</td>
<td> {{x.balance}}</td>
</tr>
</table>
</div>
<br>
<form ng-submit="addClient() ng-controller="displayClients"">
<input type="text" placeholder="name" ng-model="client.name"/>
<input type="text" placeholder="lastName" ng-model="client.lastName"/>
<input type="text" placeholder="account" ng-model="client.bankAccountNumber"/>
<input type="text" placeholder="balance" ng-model="client.balance"/>
<input type="submit" value="add client">
</form>
I need help in making my checkboxes in an array format. I have these codes:
<form #keyup="validate">
<div class="form-group">
<thead>
<th>Task Schedule</th>
<th>Notify Me</th>
<th>Email Me</th>
</thead>
<tbody>
<tr v-for="(row, index) in tableData.data" :key="index">
<td> {{ row.name }} </td>
<td><input type="checkbox" id="notify" name="notify" :value="tasks.id" v-model="data.notify"></td>
<td><input type="checkbox" id="email" name="email" :value="tasks.id" v-model="data.email"></td>
</tr>
</tbody>
</div>
</form>
Not sure though about the v-model of my checkboxes. because if I check even just one checkbox, the other boxes also gets checked. I think I need to add computed as well but Im not sure what to code. Thanks
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
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
I have the following sample model:
{
a:{
x:0,
z:0,
f:1
},
b:{
x:"a",
u:"b"
}
}
Which I render into two different tables
<div class="col-sm-5">
<h1>A</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.a">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
<div class="col-sm-5 col-md-offset-2">
<h1>B</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.b">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
The tables are dynamic, which means I can add new rows to it.
Now when I change any values inside the table, they aren´t synchronized with the model -> Editing not possible
What do I need to do to store changes automatically in the original
model?
If this is not possible, how can I get a Json Schema from my table
like the one the tables are rendered from, so that I only have to
overwrite the old one?
First off you can't dynamically change an object property name or key. So what you are trying to do with ng-model="key" simply won't work.
As far as the value part you should be using the object reference in your ng-model
<tr ng-repeat="(key,value) in schema.b">
<td>{{key}}</td>
<td>
<input type="text" ng-model="schema.b[key]" required>
</td>
<td></td>
</tr>
if you need to be able to edit the key then you need to change your data structure to an array of objects with each object having the same property names for keys