I make view from array of object into view .But My problem is that I take div element inside the li and ui .Now I want to validate element like "number", "url","email".I need to validate element on blur and keyup.Some elements may be required some not .I need to show this using "*".I know how to validate using form when I take form I used
<span ng-show="myForm.name.$error.required" class="help-inline">
But now i have div element inside li .how I will validate .?
http://plnkr.co/edit/we1QHuDuCOOR4tDAk6yv?p=preview
function Controller($scope) {
$scope.outputs = {};
$scope.inputs = [{
type: "email",
name: "email",
required:true
}, {
type: "text",
name: "name",
}, {
type: "number",
name: "phonenumber",
}, {
type: "checkbox",
name: "whant to check",
},
{
type: "url",
name: "server Url",
}];
}
or is there any way to insert all element in form ?
You can use Angular Form Validation.
When i was searching about this, i found out this tutorial. It has helped me alot.
Try your self.
Related
I've created a kendo grid, and need to insert kendo drop down into one of the columns. I need to get the data for the drop down from another data source. It kind of works, however, the problem is when I have chosen a value from the drop down and the drop down closes, instead of displaying that value it goes into editable mode. Only when I click outside of the dropdown, it displays the correct value. Here is a gif of the issue:
https://media2.giphy.com/media/KyMGB7FmFQMVTChFA7/giphy.gif
How could this issue be solved?
I have successfully created a kendo grid with a drop down list already. The only difference seems to be that there only one data source is used, but here two are used. Here is some of the code for the drop down:
title: "Type",
field: "productType.name", //this property is from the data source used for grid
template: "<kendo-drop-down-list k-value=\"dataItem.productType.id\"
k-options=\"productTypeOptions\" ng-change=\"productTypeChanged(dataItem, 'productType')\"
ng-model=\"dataItem.productType.id\"></kendo-drop-down-list>"
}...];
$scope.productTypes = {
data: [{ name: "Value 1", id: "1" }, { name: "Value 2", id: "2" }]
}
$scope.productTypeDataSource = new kendo.data.DataSource({
schema: {
data: "data",
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
},
data: $scope.productTypes,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
$scope.productTypeOptions = {
dataSource: $scope.productTypeDataSource,
dataTextField: "name",
dataValueField: "id"
};
$scope.productTChanged = function (dataItem, field, productArray, dataSource) {
var index = dataSource.indexOf(dataItem);
var c = productArray.data[index];
if (c == null) return;
c[field] = dataItem[field];
return c;
};
$scope.productTypeChanged = function (dataItem, field) {
$scope.productTChanged(dataItem, field, $scope.products, $scope.productDataSource);
};```
I'm using the following jQuery Formbuilder (http://formbuilder.readthedocs.io/en/latest/formBuilder/options/typeUserDisabledAttrs/)
Docs indicate you can disable a field attribute as follows:
var options = {
typeUserDisabledAttrs: {
'text': [
'name',
'description',
]
}
};
$(container).formBuilder(options);
However the above would apply to all text controls.
Is there anyway to disable attributes on default fields - These fields appear on all forms and person configuring the form should not be allowed to remove the fields nor change some attributes such as the name etc.
var options = {
defaultFields: [
{
"type": "text",
"required": true,
"label": "Subject",
"className": "form-control",
"name": "Subject",
"subtype": "text",
"disabledFieldButtons": ['remove']
}],
disabledActionButtons: ['clear']
};
$(container).formBuilder(options);
I've figured out a soultion by doing the following:
typeUserEvents: {
text: {
onadd: function (fld) {
var $nameField = $('.fld-name', fld);
if ($nameField.val() == "Subject")
$nameField.prop('disabled', true);
}
}
}
I am not clear how to bind any empty object so that the angular component can
bind it to its scope.
My Plunker code is here : https://plnkr.co/edit/TvHVch?p=preview
In the above link, I have a master detail table and the details section has a tabbed view. Within the Bank Tab, I have a 'New Bank' button, on clicking this I launch a Form to capture new bank detials.
The problem I am facing is how do I instantiate an empty form? I tried the below but it is still causing issues. I am using devextreme angular forms (dx-form component), but the issue seems more on how to bind a java script object formData object.
bindingOptions: {
formData: {}
},
In the plunker please refer bank.create.controller.js file for the complete code
Also I would like to manage it in such a way that I can show details if they are present (I want to use it as New and Edit form depending on presence of data)
Appreciate if you can help here.
function CreateBankController() {
var vm = this;
vm.popupForm = {
colCount: 1,
bindingOptions: {
formData: {}
},
items: [{
dataField: "fullName",
validationRules: [{
type: "required",
message: "Full Name is required"
}]
}, {
dataField: "shortName",
validationRules: [{
type: "required",
message: "Short Name is required"
}]
}]
};
ERROR
TypeError: Cannot read property 'fullname' of undefined
at t._updateFieldValue (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:18126)
at Object.<anonymous> (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:17945)
at Function.each (http://localhost:8199/ui/vendor/jquery/dist/jquery.js:365:19)
at t._syncDataWithItems (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:17818)
at t._init (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:34:17672)
at t._init (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:10:1985)
at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:11:2521)
at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:10:29014)
at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:10:1985)
at t.endUpdate (http://localhost:8199/ui/vendor/devextreme/js/dx.all.js:14:19793) <div id="form" dx-form="formCtrl.formOptions" class="dx-widget" role="form">
When you are using bindingOptions to bind a widget option in two-way binding, this means that a value you assign to an option is a field in your scope. But, you are assigning a new object to the formData option, not a scope variable name. If you manually create a new object, don't use bindingOptions.
vm.popupForm = {
colCount: 1,
formData: {},
items: [{
dataField: "fullName",
validationRules: [{
type: "required",
message: "Full Name is required"
}]
}, {
dataField: "shortName",
validationRules: [{
type: "required",
message: "Short Name is required"
}]
}]
};
See https://plnkr.co/edit/fdXBWPWUSJz9nMa5I4PL?p=preview.
Please use following approach, as your way for defining the formData is wrong. In V 16.2 this approach is allowed. So your function will be as:
function CreateBankController() {
var vm = this;
vm.option = {
colCount: 1,
formData:{},
items: [{
dataField: "fullName",
validationRules: [{
type: "required",
message: "Full Name is required"
}]
}, {
dataField: "shortName",
validationRules: [{
type: "required",
message: "Short Name is required"
}]
}]
};
For more info please visit Devexpress Doc .
I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.
My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.
$("#select-filter").select2({
placeholder: "Select a category",
data:[{
id: "",
text: ""
},{
id: "project",
text: "project"
},{
id: "date",
text: "date"
},{
id: "user",
text: "user"
}]
}).on("change", function(e) {
$("#select-filter :selected").attr("disabled", "true");
});
See example : https://jsfiddle.net/bkqeqbay/1/
You can use the select event and the data like so:
...}).on("select2:select", function(e) {
console.dir(e.params.data);
e.params.data.disabled = true;
});
Updated fiddle: https://jsfiddle.net/bkqeqbay/4/
Note that if you must also disable the underlying select element option you can do:
var index = $(e.params.data.element).index();
$("#select-filter").find('option').eq(index).prop('disabled',true);
I am new to html and i want to consult you about an issue i have.
I have a json object with this structure (only example):
{
[{
ServerName: "Server1",
TestResults: [{
Name: "Test1",
ErrorMessage: "",
Success: true
},
Name: "Test1", ErrorMessage: "", Success: true
}]
}, {
ServerName: "Server2",
TestResults: [{
Name: "Test1",
ErrorMessage: "",
Success: true
},
Name: "Test1", ErrorMessage: "", Success: true
}]
}]
}
My javascript code gets this object and suppose to create from it something like this:
<ul>
<lh>ServerName</lh>
<li>TestName</li>
<li>TestName</li>
<lh>ServerName2</lh>
<li>TestName</li>
<li>TestName</li>
.....
</ul>
I want to know how do i create such a list that each 'lh' has a line of its own,
and each 2-3 'li' are in the same line.
Can you help me find the best solution for it?
P.S - I am not using a table because it has some problems in jquery mobile that sometimes make it not fitted for the page size.
If I understand correctly, you can add some css for that:
ul>lh{
display: block;
}
ul>li{
display: inline;
}
See this jsfiddle.
Use a definition list (<dl>) and style it with css. Add a unique class to your list to avoid conflict with other CSS styles: jsfiddle
HTML
<dl class="yourclass">
<dt>ServerName</dt>
<dd>TestName</dd>
<dd>TestName</dd>
<dt>ServerName2</dt>
<dd>TestName</dd>
<dd>TestName</dd>
</dl>
CSS
dl.yourclass dd {
display:inline;
}