<!-- code snippet of html -->
<div class="form-group">
<label for="items" class="col-sm-2 control-label">Items</label>
<div class="pull-left input-group">
<input type="text" class="form-control" ng-model="name">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="addNewItem()">Add</button>
</span>
</div>
<div>
<ul class="pull-left">
<li ng-repeat="item in items">
<p style="display: inline-block">{{item}}</p>
<button type="button" class="btn btn-default" ng-click="deleteItem(item)">Delete</button>
</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="anotherField" class="col-sm-2 control-label">Another Field</label>
<input type="text" class="form-control" ng-model="anotherField" id="anotherField">
</div>
/* code snippet in Augular controller */
$scope.addNewItem = function() {
if ($scope.name && $scope.name.trim()) {
if ($scope.items.indexOf($scope.name.trim()) >= 0) {
console.log('item name should not be duplicated');
} else {
$scope.items.push($scope.name.trim());
$scope.name = '';
}
}
};
$scope.deleteItem = function(item) {
var idx = $scope.items.indexOf(item);
if (idx >= 0) $scope.items.splice(idx, 1);
};
Above codes function properly, but the only problem is that when I create even on one new item, the label supposedly for "anotherField" just shows up immediately after this this very item (even misaligned with the label for "items"); when more items were created, it's simply placed at the end of the 1st item but not like a label for "anotherField" any more. Anybody can help to address this "strange" style issue?
Thanks,
Xihua
Related
I have I form of inputs and using ng-repeat I add new inputs fields dinamically with button.
Each input is already completed by "text".
The problem :
When I insert new input field by button, the first input field clean out text.
I verify in my browser debugger and first element of my Items Array is not empty. Why it is not present on input ?
There is my HTML:
<div class="row">
<div class="col-sm-10">
<input ng-repeat="item in vm.myItemsArray"
name="myItemName"
class="form-control"
type="text"
ng-model="item.value"/>
</div>
<div class="col-sm-1 col-sm-offset-1">
<span ng-click="addItem()" class="glyphicon glyphicon-plus btn-sm btn-default"/>
</div>
</div>
AND JS :
// INITIALIZE INPUTS
vm.myItemsArray = [{value: "text"}];
// ADD NEW INPUTS
function addItem() {
vm.myItemsArray.push({value: "text"});
}
(function() {
'use strict';
angular
.module('angularExampleModule',[])
.controller('angularExampleController', ['$scope', angularExampleController]);
function angularExampleController($scope){
$scope.myItemsArray = [{value: "text"}];
$scope.addItem = function () {
$scope.myItemsArray.push({value: "text"});
}
}
})();
.input-element{
margin:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularExampleModule" ng-controller="angularExampleController">
<div class="row">
<div class="col-sm-10 input-element" ng-repeat="item in myItemsArray">
<input name="myItemName" class="form-control" type="text" ng-model="item.value"/>
</div>
<div class="col-sm-1 col-sm-offset-1">
<button ng-click="addItem()" class="glyphicon glyphicon-plus btn-sm btn-default">Add Item</button>
</div>
</div>
OR Check this https://codepen.io/DeepaliK/pen/BqXqNB
My angularjs validation in .NET MVC cshtml files isnt working.
Below is my code:
cshtml code:
<div id="addEditItem" class="modal" role="dialog">
<form novalidate role="form" name="frmItem">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Item Details</h4>
</div>
<div class="modal-body">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-if="frmItem.name.$error.required && frmItem.name.$dirty">*</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="submit" class="btn btn-success" ng-click="SaveItem()"><i class="fa fa-save"></i> Submit</button>
</div>
</div>
</div>
</form>
</div>
Controller Code:
medApp.controller("itemController", function ($scope, itemService) {
$scope.SaveItem = function () {
var itemModel = {
Id: $scope.id,
Name: $scope.name,
Description: $scope.description,
Manufacturer: $scope.manufacturer,
BatchNo: $scope.batchNo,
ExpiryDate: $scope.expiryDate
};
if (!CheckIsValid()) {
alert('Please fill the detail!');
return false;
}
var requestResponse = itemService.AddEdit(itemModel);
Message(requestResponse);
};
function CheckIsValid() {
var isValid = true;
if ($('#name').val() === '' || $('#description').val() === '' || $('#manufacturer').val() === '' || $('#batchNo').val() === '') {
isValid = false;
}
return isValid;
}
});
The addEditItem is a modal dialog. If I click on submit the alert('Error in getting records'); is shown.
I want the validation to happen at cshtml level rather than the java alert.
I am going to remove the CheckIsValid function. I want the validation to happen only in cshtml file.
Any idea what's going on?
In your attached cshtml code I could find the "name" id only, but your check function is also checking"description", "manufacturer" and "batchNo". All of those item must be exist otherwise the function returns with false.
The CheckIsValid() function will return true when all items exists and contains at least one character. Anyway the good start is to put a breakpoint into your check code and see why returns with false.
Wordking fiddle
<form name="myForm">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-show="myForm.name.$error.required && !myForm.name.$valid">*</span>
</div>
<button ng-click="display()">Log</button>
</form>
Would like to add that you need to add:
Use name on inputs to be accesable from the scope
Use ng-show/ng-hide for validation since it changes alot
I'm creating an inventory app, and the user has the option to add a new product or edit an existing one. Both options bring up the same modal window, and I want it to close automatically after the user clicks on submit.
Below is part of my code, my entire code is here: http://codepen.io/andresq820/pen/LWGKXW
HTML
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{title(item.code)}}</h4>
</div>
<div class="modal-body">
<form name="myEditForm" ng-submit="editProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" minlength="3" class="form-control" name="code" id="code"
ng-model="item.code" ng-disabled="false" ng-pattern="/^[a-zA-Z0-9]*$/">
<span ng-show="myEditForm.code.$error.pattern">Code can only be alphanumeric.</span> </br>
<span ng-show="myEditForm.code.$error.minlength">Code has to be at least 3 characters</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" name="description" id="description" ng-model="item.description" required>
<span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" class="form-control" name="amount" id="amount" size="5" maxlength="5"
ng-model="item.amount" ng-pattern="/^[0-9]{1,7}$/">
<span ng-show="myEditForm.amount.$error.pattern">Only whole numbers are allowed</span>
</div>
<div class="form-group">
<label for="newImage">{{loadImg}}</label>
<input type="file" class="form-control" name="newImage" id="newImage" ng-model="item.image">
</div>
<div class="form-group" ng-show="displayRadioBtns">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" ng-disabled="myEditForm.$invalid"/>
</div>
</form>
</div>
</div>
</div>
</div>
ANGULARJS
$scope.editProduct = function(item){
var index = $scope.items.indexOf(item);
console.log(index);
console.log(item);
console.log(item.code.valueOf());
if(index == -1){
console.log('new item');
$scope.item.code = item.code;
$scope.item.description = item.description;
$scope.item.in = item.amount;
$scope.item.out = 0;
$scope.item.createdOn = Date.now();
$scope.items.push($scope.item);
$scope.item = {};
}else{
console.log('edit item');
console.log(item);
console.log(item.type);
console.log($scope.item.type);
console.log(index);
$scope.items[index].code = item.code;
console.log($scope.items[index].code);
$scope.items[index].description = item.description;
console.log($scope.items[index].description);
$scope.items[index].image = item.image;
if($scope.item.type == 'in'){
console.log($scope.item.type);
console.log(typeof($scope.items[index].in));
console.log(typeof($scope.item.amount));
console.log(typeof(item.amount));
$scope.items[index].in += item.amount;
console.log($scope.items[index].in);
$scope.item = {};
}else if($scope.item.type == 'out'){
console.log($scope.item.type);
$scope.items[index].out += $scope.item.amount;
$scope.item = {};
}else{
alert("Type is a required field");
return;
};
}
};
You can make function calls on ngSubmit
form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"
I haven't used AngularJS, but the following works for me in Angular 2, if you're able to use jQuery:
$(".modal").modal("hide")
Fire button click on submit event in angularJS.
<input id="quemodalcancel" type="submit" value="Cancel" class="btn blue_btn" data-dismiss="modal" aria-hidden="true">
$scope.editProduct = function(item){
// submit button code
document.querySelector('#quemodalcancel').click();
}
I have small form with 2 date input and one checklist which are all checkboxes. I couldn't figure it out how to require any of one checkbox in list for the form validation. If I add ng-required for an checkbox it repeats for all the check boxes. Can anyone know about this how to require the checkbox as required form element. but I don't want to choose all the element for making form valid. So if only one of the form field which are the checkboxes has been selected form must be valid otherwise invalid.
angular.module('frmApp', [
'ui.bootstrap', 'angularMoment'
])
.controller('Frm Controller', [
'$scope',
function($scope) {
$scope.invDets = $stateParams.details;
$scope.allowanceObj = {};
$scope.finCompWithLogo = [];
$scope.validUntil = new Date();
$scope.recentDate = new Date();
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.openedPayment = false;
$scope.openedAllowance = false;
$scope.openPayment = function($event, elementOpened) {
$scope.paymentDueDate = new Date();
/*$scope.openedPayment = !$scope.openedPayment;*/
$event.preventDefault();
$event.stopPropagation();
$scope[elementOpened] = !$scope[elementOpened];
};
$scope.openAllowance = function($event, elementOpened) {
$scope.allowanceDueDate = new Date();
/*$scope.openedAllowance = !$scope.openedAllowance;*/
$event.preventDefault();
$event.stopPropagation();
$scope[elementOpened] = !$scope[elementOpened];
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1,
'minDate': new Date()
};
$scope.doSomething = function (frm) {
$http.post('/someUrl', frm, config).then(successCallback, errorCallback); alert('Done something!!');
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<form name="frm1" novalidate>
<div class="row">
<div class="allowance-required-field">
<div class="box">
<div class="icon"> <i class="fa fa-calendar"></i> </div>
<div class="field-title">Payment</div>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd-MM-yyyy" ng-click="openPayment($event, 'openedPayment')" ng-model="frm1.PaymentDueDate" show-weeks="false" is-open="openedPayment" datepicker-options="dateOptions" ng-required="true"
/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="openPayment($event, 'openedPayment')"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="allowance-required-field">
<div class="box">
<div class="icon"> <i class="fa fa-calendar"></i> </div>
<div class="field-title">Delay</div>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd-MM-yyyy" ng-click="openAllowance($event, 'openedAllowance')" ng-model="frm1.AllowanceDueDate" show-weeks="false" is-open="openedAllowance" min-date="recentDate" max-date="frm1.PaymentDueDate"
datepicker-options="dateOptions" ng-required="true" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="openAllowance($event, 'openedAllowance')"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="pick-factoring-companies">
<div class="box">
<h2 class="text-center"> Choose One or More </h2>
<div class="text-center">
Select All
Deselect All
</div>
<ul ng-required="true">
<li ng-repeat="cmp in finCompWithLogo">
<div ng-if="cmp" class="finance-company">
<input id="{{'company-'+$index}}" type="checkbox" class="pick-faktoring" checklist-model="frm1.AllowanceCompanies" checklist-value="cmp.Identifier" ng-change="addCompany(cmp.Identifier)">
<label for="{{'company-'+$index}}">
<div class="img"> <img data-toggle="tooltip" data-placement="bottom" src="data:image/{{cmp.Logo[0].Type}};base64,{{cmp.Logo[0].Data}}" title="{{cmp.CompanyName}}"> </div>
<div class="title"> {{cmp.CompanyName}} </div>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center">
Send
</div>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
Mark the checkboxes as ng-required if the list is empty.
<label ng-repeat="role in roles">
<input ng-required="user.roles.length == 0"
type="checkbox"
checklist-model="user.roles"
checklist-value="role.id">
{{role.text}}
</label>
You can use checklist-change to set the validity or checklist-before-change to enable/disable selection.
Here's an example: http://jsfiddle.net/beradrian/nbwcbejw/
If you go for checklist-change and $setValidity then you should set this initially.
SOLVED! I have tried solves my problem.
<input id="{{'company-'+$index}}" type="checkbox" ng-model="cmp.Selected" ng-click="pushCompanyToArray(cmp)"
ng-required="frm1.AllowanceCompanies.length == 0"
ng-value="cmp.ID" ng-checked="all || cmp.Selected"/>
this solves my question. For anyone who couldn't find the solution this ng-required solved my problem.
I have an array of items that I'm repeating.
<li ng-repeat="lineItem in lineItems" class="bouncy-slide-left">
<div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
<label for="expenses">{{lineItem.labels.name}}Expense:</label>
<br>
<select name="expenses" ng-model="expense.name" class="form-control" style="width: 175px;">
<option value="{{expense.name}}" ng-repeat="expense in expenses">{{expense.name}}</option>
</select>
</div>
<div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
<label>Material Cost:</label>
<br>
<input type="text" ng-model="expense.cost" class="form-control" name="material" placeholder="5.00">
</div>
<div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
<label>Quantity:</label>
<br>
<input type="text" ng-model="expense.quantity" class="form-control" name="quantity" placeholder="5">
</div>
<div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
<label>Labor Rate:</label>
<br>
<input type="text" ng-model="expense.labor" class="form-control" name="labor" placeholder="20.00">
</div>
<div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
<label>Hours:</label>
<br>
<input type="text" ng-model="expense.hours" class="form-control" name="hours" placeholder="4">
</div>
<div class="form-group col-sm-5 col-lg-3 col-xl-2 pad-right">
<label>Responsible:</label>
<br>
<span>Renter</span>
<input type="radio" name="radio-1">
<span>Owner</span>
<input type="radio" name="radio-1">
</div>
<br>
<div class="col-sm-12 pad-right">
<span class="pad-right">Owner Total: {{ownerTotal}}</span>
<span class="pad-right">Renter Total: {{renterTotal}}</span>
</div>
<div class="col-sm-12 pad-right">
<button class="btn btn-primary btn-sm" ng-click="addExpense()"><i class="fa-check"></i>Add New Expense</button>
<button class="btn btn-primary btn-sm" ng-click="removeExpense($event)"><i class="fa-remove"></i>Remove Expense</button>
</div>
</li>
I have an array, an add method, and a remove method.
$scope.lineItems = [
{expense: 1}
];
//when button is clicked
//add a new blank object to the lineItems array
$scope.addExpense = function() {
var num = Math.random();
var item = {expense: num};
$scope.lineItems.push(item);
};
//when remove button is clicked
//remove the specific item that was clicked from the array
$scope.removeExpense = function($event) {
var elm = $event.currentTarget.parentElement.parentElement;
console.log(elm);
elm.remove();
//need to splice selected item OUT of the array
var i = ???
$scope.lineItems.splice(i, 1);
};
I've tried several things here. Most of the answers I've found just use indexOf, however the items are being dynamically generated by my model. So I don't know how to get an index of something that doesn't exist yet.
I've also tried some jQueryLite. I would love to just use something like : when $this is clicked, remove it from the dom. I can't seem to find the ANGULAR answer for that.
Instead of ng-click="removeExpense($event)" simply pass the lineItem, like ng-click="removeExpense(lineItem)". You can then find the lineItem in lineItems by indexOf
$scope.removeExpense = function(lineItem) {
var index = $scope.lineItems.indexOf(lineItem);
$scope.lineItems.splice(index, 1);
}
call removeExpense($index) on ng-click like:
<button class="btn btn-primary btn-sm" ng-click="removeExpense($index)"><i class="fa-remove"></i>Remove Expense</button>
and replace remove function with this code:
$scope.removeExpense = function(index) {
$scope.lineItems.splice(index, 1);
}