Currently, I have a formly field set up as such:
{
key: 'id',
type: 'input',
validators: {
validId: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return isAlphanumeric(value);
}else{
return false;
}
}
},
templateOptions: {
label: 'ID',
options: [],
required: true
}
},
isAlphanumeric() is a function I wrote that determines if a string is alphanumeric--this works as intended. However, the user is still allowed to Submit the form (which obviously does not work, as it will produce en error).
How might I go about highlighting the field red (as if it were a required field that was not filled in) if the contents are not valid, preventing the user from submitting until they enter a valid value?
You can use ngClass and assign css classes based off of an expresion. for example (taken straight from their page)
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
implemented with your code
<p ng-class="{strike: validId(1,2,yourscope), bold: important, 'has-error': error}">Map Syntax Example</p>
Related
So, I'm assigned to work with vue at work, but VUE and I aren't friends yet. Currently I'm facing an issue that I don't know how to resolve - I'll explain it the best I can with the limited VUE knowledge I possess.
Simplistically I have a vue component, which looks like this:
Vue.component('input-checkboxes', {
template: '#input_checkboxes',
props: ['id', 'label', 'list', 'required', 'readonly']
});
Then I have a template that looks like this:
<template id="input_checkboxes">
<div>
<div>{{ label }}</div>
<div>
<label v-for="list_item in list">
<input type="checkbox" v-model="value" :name="id" :required="required" :readonly="readonly" value="{{ list_item.name }}"> {{ list_item.name }}
</label>
</div>
</div>
</template>
Then I have a rather large vue instance that I'll paste the relevant parts of here.
This variable is being created:
var some_form = {
form : {
Endless: '',
Amounts: '',
Of: '',
Names: '',
In: '',
The: '',
Form: '',
THIS-ONE: ''
}
};
var vm = new Vue({
el: '#form_product',
data: $.extend({
someStuff : 'some values',
someLists : {}
}, some_form),
ready: function() {
this.getLists(); // Fetches alot of lists
},
methods: {
this.$http.get(
framework.url('api','getLookupLists')
).then(function (response) {
this.lists = response.body;
this.pageLoading = false;
}.bind(this));
}
In the end I have my html page that amongst loads of other fields, that works very well, has this:
<input-checkboxes
id="THIS-ONE"
label="A Fitting Label"
:value.sync="form.SomeID"
:list="lists.AnAppropriateList">
</input-checkboxes>
So, that's the gist of the setup. I have numerous other components like input-text, that works just fine (someone else made it before I did), I even created other components by copying his way, and just changing some elements.
I cannot get checkboxes to work, I think my problem is that there are numerous inputs, and that I don't know how to bind the results of those inputs to my VUE instance.
I really hope this makes sense, because I would really like some pointers on how to get on... Maybe if someone duplicated this setup really simplistic and showed how the array of values from the checkboxes could be bound to the vue instance?
There are a couple of mistakes you are (or might be) making.
First of all, the value prop you pass down has to be an array (seems
like it's a string from your example)
value is not correctly set, you need to set it by doing :value="someValue"; you can't have curlies in an attribute.
Lastly, value should probably be the id of the item and not the name. You have a chance of a collision if you use the name.
Bonus: you don't need to use :name at all (unless you are submitting the form server side...? But I can't see why you would do that.)
Here's a simple working example to sum this up:
HTML
<label v-for="list_item in list">
<input type="checkbox" v-model="value" :required="required" :readonly="readonly" :value="list_item.id"> {{ list_item.name }}
</label>
JS
var app = new Vue({
el: 'main',
data: function () {
return {
value: [],
label: 'Label name',
readonly: false,
required: true,
list: [
{
name: 'Item 1',
id: 'item1'
},
{
name: 'Item 2',
id: 'item2'
}
]
}
}
})
I've also made a bin for you to try it out.
How to change **glyphicon" (right side of input field (see below)) on validation of input type ?
eg. When input is valid, change it to glyphicon-ok (tick mark ) or when it is invalid change it to glyphicon-remove ( cross sign )
vm.rentalFields = [
{
key: 'first_name',
type: 'input',
// class:glyphicon-ok,
templateOptions: {
type: 'text',
label: 'First Name',
placeholder: 'Enter your first name',
required: true,
"addonRight": {
"class": "glyphicon glyphicon-ok form-control-feedback"
}
}
}];
With angular-formly, if you want anything to be dynamic, you use expressionProperties. Because you want the class property of addonRight to be dynamic, your expressionProperties property for that will be:
'templateOptions.addonRight.class': '"glyphicon form-control-feedback glyphicon-" + (fc.$valid ? "ok" : "remove")'
The values of expressionProperties are called formly expressions which basically means they can be strings which are evaluated on the formly-field's $scope or a function that is passed ($viewValue, $modelValue, scope) and can return the value or a promise that resolves to the value.
The fc you see in that expression is a shortcut for options.formControl which is assigned to your field's NgModelController (which is why you have access to $valid.
At the end of the day, your field config will look something like this:
vm.rentalFields = [
{
key: 'first_name',
type: 'input',
templateOptions: {
type: 'text',
label: 'First Name',
placeholder: 'Enter your first name',
required: true,
addonRight: {
class: 'glyphicon glyphicon-ok form-control-feedback' // <-- initialized to a valid state
}
},
expressionProperties: {
'templateOptions.addonRight.class': '"glyphicon form-control-feedback glyphicon-" + (fc.$valid ? "ok" : "remove")'
}
}
];
You need to add ng-class on the container that stores the glyphicon, and then conditional check a variable that stores the validity of the input. For example this is the approach using forms:
<form class="form-inline" name="myForm">
<input type="text" class="form-control" name="firstName" ng-model="firstName" ng-maxlength="5" />
<span class="glyphicon" ng-class="{'glyphicon-ok': myForm.firstName.$valid, 'glyphicon-remove': myForm.firstName.$invalid}"></span>
</form>
Where myForm.firstName.$invalid is the condition on which you set glyphicon.
(Which is set by the ng-maxlength directive on the input, see this: https://docs.angularjs.org/api/ng/directive/input).
Alternatively you can use a separated variable to store the validity of the input based on some rules you figure out in your controller.
See this fiddle: http://jsfiddle.net/HB7LU/14198/
This will work:
<span class="glyphicon green" ng-class="{'glyphicon-ok': {{single_request.status}}==1, 'glyphicon-remove': {{single_request.status}}==0 }" ></span>
I am doing form validations in Sencha Touch 2.3. My model looks like following.
Ext.define('net.omobio.dialog.dialogcc.model.StockTransferDetails', {
extend: 'Ext.data.Model',
config: {
fields: ['to_msisdn','to_profile_id','transfer_lob','transfer_item_status','transfer_product','transfer_qty','transfer_req_type','transfer_item_type','transfer_pack_type'],
validations: [
{ type: 'presence', field: 'to_msisdn' },
{ type: 'presence', field: 'to_profile_id' },
{ type: 'exclusion', field: 'transfer_lob', list: ['null'] },
{ type: 'exclusion', field: 'transfer_req_type', list: ['null'] },
{ type: 'exclusion', field: 'transfer_item_type', list: ['null'] },
{ type: 'exclusion', field: 'transfer_pack_type', list: ['null'] }
]
}
});
Following is a code segment that I use in my controller to remove validations from hidden form fields but no luck.
var form1 = me.getStockTransferRequestPage();
var model = Ext.create("net.omobio.dialog.dialogcc.model.StockTransferDetails", form1.getValues());
// validate form fields
var errors = model.validate();
if (!errors.isValid()) {
// loop through validation errors and generate a message to the user
errors.each(function (errorObj){
//errorString += errorObj.getField() + " " + errorObj.getMessage();
console.log('7777777777777777777 '+errorObj.getField());
if (!Ext.getCmp(errorObj.getField().toString()).isHidden()) {
var s = Ext.String.format('field[name={0}]',errorObj.getField());
form1.down(s).addCls('invalidField');
}
});
Ext.Msg.alert('','stock_transfer.errors.required_fields_empty');
}
I would be much appreciated if anyone could help me to solve this.
Thank you
so there are multiple ways to achieve this, my preference even though some folks won't like it, but it will always work.
I did the following override to solve this problem, tried my best not to affect the normal flow of validation.the first two overrides have to be added somewhere to your overrides folder, you only have to add them once for the whole app.
Ext.Define('Ext.form.field.BaseOverride', {
override: 'Ext.form.field,Base',
/* traverse up and look for a hidden Parent/Ancestor */
isParentHidden: function () {
return this.up('[hidden=true]');
}
/* override isValid basic method to consider skipValidateWhenHidden property, when skipValidateWhenHidden is set to true code should check if the elementor it's Parent/Ancestors is hidden */
isValid: function () {
var me = this,
disabled = me.disabled,
isHidden = me.isHidden(),
skipValidateWhenHidden = !!me.skipValidateWhenHidden,
validate = me.forceValidation || !disabled,
isValid = validate ? me.validateValue(me.processRawValue(me.getRawValue())) : disabled;
if (isValid || !skipValidateWhenHidden) {
return isValid;
}
if (skipValidateWhenHidden) {
isHidden = isHidden ? true : me.isParentHidden();
if (isHidden) {
return skipValidateWhenHidden;
}
}
return isValid;
}
});
and eventually you'll be able to do the following, which is set the property to true on any field so if its not visible for the user, it will survive validation
{
itemId: 'City',
cls: 'AddressCity',
xtype: 'textfield',
emptyText: emptyCityText,
skipValidateWhenHidden: true,
},
another approach is to add a show()/Hide() listener on the fields container to enable/disable the children, disabling the fields would make them skip validation, but i'm not a big fan of managing button states and wiring listeners.
Note
Ext.getCmp() takes component id
errorObj.getField().toString() returns model field name, It won't
return id of the component (hidden) field.
So if model field name matches with hidden field id, It will work. Otherwise it won't work.
In my AngularJS application, I am displaying contacts data in a grid. My typical contacts JSON looks like as below ...
[
{ type: "IM", value: "mavaze123", default: true },
{ type: "IM", value: "mvaze2014", default: false },
{ type: "IM", value: "mavaze923", default: false },
{ type: "IM", value: "mvaze8927", default: false },
{ type: "Email", value: "mavaze123#abc.com", default: true },
{ type: "Email", value: "mvaze2014#xyz.net", default: false }
]
The last property 'default' is actually a radio button, selection of which should alter the original default value of the corresponding contact type in above JSON. There can be one default from each type of contact i.e. we can group radio buttons based on the contact type.
<div ng-repeat="contact in contacts">
<div>{{contact.type}}</div>
<div>{{contact.value}}</div>
<div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true"/></div>
</div>
Note: The above code is not the exact one, but approximately same, as
it will appear inside a custom grid component.
Now when I load my view/edit form page with above JSON, it correctly shows the radio state of all contacts. The problem comes, after page load, when user selects another contact as default. This actually changes the model value of default to true for newly selected contact however the model value of original default contact still remains true, even though its radio state changes to uncheck/blur (because they are having same 'name' value).
I thought to write a directive, but I am unable get it triggered on radio on-blur/uncheck event.
There are various posts on binding boolean values to radio buttons, but I am unable to get it work in my scenario, as I want to update model values for individual radio button in a radio group. See there is no single model representing a radio group.
I think you should change your design to separate the contacts from contactTypes and store the key to the default contact in contact type.
In your current design, there are duplicated values for default and that's not the desired way to work with radio.
$scope.contacts = [
{ type: "IM", value: "mavaze123" },
{ type: "IM", value: "mvaze2014" },
{ type: "IM", value: "mavaze923" },
{ type: "IM", value: "mvaze8927" },
{ type: "Email", value: "mavaze123#abc.com" },
{ type: "Email", value: "mvaze2014#xyz.net" }
];
$scope.contactTypes = {
"IM": { default:"mavaze123"}, //the default is contact with value = mavaze123
"Email": { default:"mavaze123#abc.com"}
};
You Html:
<div ng-repeat="contact in contacts">
<div>{{contact.type}}</div>
<div>{{contact.value}}</div>
<div><input type="radio" name="{{contact.type}}" ng-model="contactTypes[contact.type].default" ng-value="contact.value"/></div>
</div>
DEMO
I assume that the key of contact is value, you could use an Id for your contact.
I added an attribute directive in my input statement ...
<div ng-repeat="contact in contacts">
<div>{{contact.type}}</div>
<div>{{contact.value}}</div>
<div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true" boolean-grid-model /></div>
</div>
And my custom directive ...
myModule.directive('booleanGridModel') {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attrs, controller) {
var radioSelected = scope.$eval(attrs.ngModel);
if(radioSelected) {
var selectedContact = scope.contact;
_.each(scope.contacts, function(contact) {
if(contact.type === selectedContact.type) {
_.isEqual(contact, selectedContact) ? contact.default = true : contact.default = false;
}
});
}
}
};
}
WHy you declare ng-value="true" please remove that
<div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="{{contact.default}}"/></div>
Please use $scope.$apply() in your value changing code
Like something below
$scope.$apply(function ChangeType()
{
/Code
});
And you need to change name="{{contact.type}}" to name="contact.type{{$index}}" Because some types are same name.
I have coded the following:
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
{ field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
]
};
The myData actually contains four colums Id, Name, Status and Description. Where status is a simple javascript array with three types of status called myStatus.
Is it possible for me to somehow link in the data from myStatus to a field in the ng-grid so I can then select a new value from a select drop down?
Here is output of some experiment.
http://plnkr.co/edit/W1TkRgsp0klhqquxaiyc?p=preview
It seems that you can put select in cell template.
And you can make use of row object to retrieve whatever
you need.
I used row.rowIndex to property access to the original data.
template example:
<div>
<select ng-model="myData[ row.rowIndex ].myStatus">
<option ng-repeat="st in statuses">{{st}}</option>
</select>
</div>
(It would be beutiful if we can write to ogirinal data through row
object. I do not know how.)
The way tosh shimayama are doing it, will not allow for sorting the table in any other order than the model array.
This is kind of an ugly way to do it, but I took a quick look in the source code for ng-grid and found that they use regexp to insert the ng-model. So by using the same variable, COL_FIELD, in your code you can make ng-grid insert the correct model.
<div>
<select ng-model="COL_FIELD">
<option ng-repeat="status in statuses">{{status}}</option>
</select>
</div>
Here is a plunker with a working example:
http://plnkr.co/edit/Yj2qmI?p=preview
A more complete/tidier way to do this in ng-grid 2.x I've included in a plunker here: http://plnkr.co/edit/VABAEu?p=preview, leveraging content from another similar question on stackoverflow here: AngularJS and ng-grid - auto save data to the server after a cell was changed
In summary, my format for the editable field template looks like so:
$scope.statuses = {1: 'active', 2: 'inactive'};
$scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index"
ng-input="COL_FIELD" ng-model="COL_FIELD"
ng-options="id as name for (id, name) in statuses"
ng-blur="updateEntity(row)" />';
I've provided a blog post that has a more thorough walkthrough of the end-to-end code: http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/
Ng-grid (ui-grid) 3.0 is close to being released, and offers different ways to do editable grids. I have a post on that here: http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/
I can't take credit for the entire solution. I just put the pieces together. My goal was to preserve three-way binding.
Template should look something like this:
$scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-options="value.id as value.label for value in OptionsList}" />';
COL_FIELD of course essential to keep the reference to correct cell.
You can capture the change natively:
$scope.$on('ngGridEventEndCellEdit', function (evt) {
console.log(evt.targetScope.row.entity);
WaitListArray.$save(evt.targetScope.row.entity)
.then(function (ref) {
console.log('saved');
});
});
In this case WaitListArray is my Firebase/AngularFire Array for the table. Using this method, I was able to preserve my tree-way binding.
Field (ng-options):
{
field: 'status',
displayName: 'Status',
enableCellEditOnFocus: true,
editableCellTemplate: $scope.cellSelectEditableTemplate,
cellFilter: 'mapStatus:OptionsList'
}
I added filter to replace id with label for my dropdown values.
.filter('mapStatus', function() {
return function(input, OptionsList) {
var _out = 'unknown';
angular.forEach(OptionsList, function(value, key) {
if (value && value.id == input) {
_out = value.label;
}
});
return _out;
};
})
In the above, OptionsList is my dropdown values array
example: {id:1,label:"label1"}
I found this solution highly reusable. Hopefully, it saves time for someone.