I need validation for ng-list, means should restrict the user to enter more than three array list like ['121','565','435'] and if user tries to enter like ['121','565','435','787'] should give error like only 3 vin can enter.
Also if the user enter ['**1214**','565','435'] like above it should tell only 3 digits are allowed.
This is my input field:
<input type="text" name="vin" id="vin" class="form-control"
ng-model="vm.user.vin" ng-list required max-length="3"/>
I am new in AngularJS.
I don't know the default validate properties for ng-list, but you can customise the validation like
<input type="text" name="vin" id="vin" class="form-control"
ng-model="vm.user.vin" ng-list required max="3" ng-change="isBigEnough(vm.user.vin)" />
<span ng-show="vm.user.vin.length > 3">array length should below than three</span>
<span ng-show="IsElementLength">element length should below than three</span>
and your controller side code
$scope.isBigEnough = function (values) {
if (values != undefined) {
values.every(function (element, index, array) {
if (element.length > 3) {
$scope.IsElementLength = true;
return false;
}
$scope.IsElementLength = false;
return true;
})
}
}
Result
['121','565','435'] - No error message
['1211','565','435'] -element length should below than three
['121','565','435','543']- array length should below than three
['1211','565','435','543']- array length should below than three and element length should below than three
i have bring the code on plunker, but i did't test it on plunker.
Related
this should be straight forward, just cant figure out why it's not working.
I receive data in this format from Web API 2 (captured from Chrome's debugger):
AngularJS code to render the results
(vm.reportParameters contains that structure on the screenshot with 2 nodes):
<form>
<div ng-repeat="param in vm.reportParameters" class="form-group">
<label>Name</label>
<input type="text" class="form-control" value="{{param.Name}}" />
</div>
</form>
The output (missing value of Name property, should display "Country"):
Any idea what I am missing here? Why the value is not shown?
// GET api/reports/5
// This action retrieves parameters of selected report by reportId
[ResponseType(typeof(ParametersModel))]
public IHttpActionResult Get(string reportId)
{
try
{
var manager = new ReportsManager();
var model = manager.GetReportParameters(reportId);
if (model == null || model.Parameters == null || model.Parameters.Count == 0)
{
return NotFound();
}
return Ok<ParametersModel>(model);
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
Thanks.
UPDATE
This garbage-alike data has this weird format with all these k__XXXXX
things because I had various attributes applied to the model for XML
Deserialization (in C# code). After I removed all these Serialization
attributes, the model became normal and clean as expected. Go guess :)
Use without expression, ng-model
<input type="text" class="form-control" ng-model="param.Name" />
Hi i have inputs like this
<input type="text" ng-model="tbl.Public">
<input type="text" ng-model="tbl.Private">
<input type="text" ng-value="tbl.Public--tbl.Private" ng-model="tbl.Total">
the above form will working fine it will sum the Public and Private value and put it in tbl.Total field. My problem is in edit form where value of tbl.Total, tbl.Public, tbl.Private are assign from database.
js
$scope.tbl.Public=10;
$scope.tbl.Private=25;
$scope.tbl.Total=35;
now after assigning a value from js when i change value of tbl.Public or tbl.Private in form it is not affecting a tbl.Total it should sum the two value and put it in tbl.Total field.
Thank you for your any help and suggestion.
ng-value is usually used on radiobuttons and option elements, it's not a good fit for your use case.
A better thing to do would be implementing an updateTotal() function combined with ng-change. I would also recommend changing your input types to number so you're not allowing users to sum text.
<input type="number" ng-model="tbl.Public" ng-change="updateTotal();">
<input type="number" ng-model="tbl.Private" ng-change="updateTotal();">
<input type="number" ng-model="tbl.Total">
In your controller:
$scope.updateTotal = function() {
$scope.tbl.Total = $scope.tbl.Public + $scope.tbl.Private;
}
It should be like this to prevent from concatenate
$scope.updateTotal = function() {
var Public = Number($scope.tbl.Public || 0);
var Private = Number($scope.tbl.Private || 0);
$scope.tbl.Total = Public + Private;
}
Given this:
<input id="modalContentTitle"
name="modalContentTitle"
ng-minlength="5"
ng-model="ahs.modal.data.title"
ng-required="true" />
I know that I can access information on that field like this:
title="{{ ahs.vr5(ahs.forms.modal.modalContentTitle) }}"></i>
vr5 = function (field) {
if (angular.isDefined(field)) {
if (field.$error.required) return "Required";
if (field.$error.minlength) return "Minimum 5 characters";
if (field.$error.email) return "Email Invalid";
}
return "OK";
}
Is there a way that I can get the ng-minlength directly from the field information with AngularJS or do I need to create a different vr6 function if I want to verify lengths for fields with a minlength of 6.
unfortunately minlength is a private variable within Angular. You can however, do a workaround for this
<input id="modalContentTitle"
name="modalContentTitle"
ng-minlength="modalContentTitle.minlength = 5"
ng-model="ahs.modal.data.title"
ng-required="true" />
And now you can access this by
field.minlength
I have a form that contains a lot of fields and I want to post all the form fields to a service using a post method. But I would like to send the whole form object and not to write one property by one. If I try to post the object that contains all my fields $scope.formData it also contains all the angular stuff inside like errors. What I need is a collection of field names and values. How can I achieve this with minimum coding?
Edit:
I ended up writing my own function:
function getAngularFormFields(form) {
var dictionary = { form: {} };
for (var key in form) {
if (form.hasOwnProperty(key) && !key.indexOf('$') == 0) {
dictionary.form[key] = form[key].$modelValue;
}
}
return dictionary;
}
Normally if you need to post a form you could just use the default method provided by your browser. This will send the form data, via POST, to your URL.
<form action="yourUrlHere" method="POST">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>
In my form validation there is part of server validations.
So I should get back from the server list with the names of the fields and a string with the error in each of them.
My idea was to write a general code knowledge to deal with all fields without knowing them in advance, by accessing them with their name.
this is field for example:
<!-- Email -->
<div class="form-group" data-ng-class="{ 'has-error' : step1Form.email.$invalid && (!step1Form.email.$pristine || submitted) }">
<label>Email</label>
<input type="email" name="email" class="form-control" data-ng-model="user.email" required data-ng-minlength="5" data-ng-maxlength="60">
<p data-ng-show="step1Form.email.$error.required && (!step1Form.email.$pristine || submitted)" class="help-block">required!</p>
<p data-ng-show="step1Form.email.$error.minlength" class="help-block">too short1</p>
<p data-ng-show="step1Form.email.$error.maxlength" class="help-block">too long!</p>
<p data-ng-show="step1Form.email.$error.email" class="help-block">invalid email!</p>
<p data-ng-show="step1Form.email.$error.serverError" class="help-block">{{emailServerError}}</p>
</div>
like you can see, the variable emailServerError is saved for errors that come from the server validations...
i have a lot fields in my application and i try to write generic code that will fit for all the fields...
so this is the angular code:
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.step1Form.$valid) {
// now we will go to server side validation
// AJAX calls.......
// lets say we got this back:
var problem = { field: 'email', msg: 'this email is already registered'};
// now we need to setValidity for email input.
var errorVariableName = $parse(problem.field + 'ServerError'); // Get the name of the error string variable.
errorVariableName.assign($scope, problem.msg); // Assigns a value to it
console.log($scope.emailServerError); // = 'this email is already registered'
// HERE THE PROBLEM:
// now i need to do something like that:
// $scope.step1Form. + problem.field + .$setValidity('serverError', false);
// but i dont know how to this that.
// i think that i need to get this element ($scope.step1Form. + problem.field) in some way by name, and then use setValidity on it. but i dont know how..
}
};
the question is in the comments inside the code...
You can try
$scope.step1Form
and then access the right value with
$scope.step1Form["nameOfProblemfield"]