in html:
<input id="iCheck"
class="easyui-switchbutton"
data-options="onChange:iCheckChange"
>
<input id="iCombo"
class="easyui-combobox"
data-options="mode:'remote'
, disabled: true
, required: false
, loader: ...
"
>
in script
function iCheckChange(aChecked){
$('#iCombo').combobox(aChecked?'enable':'disable').combobox('options').required = aChecked;
};
Code: https://jsfiddle.net/0dbog4of/4/
How repaint iCombo as iCombo2 ?
change 'required' option don`t redraw component :(
<script>
function iCheckChange(aChecked){
$('#iCombo').combobox(aChecked?'enable':'disable');
$('#iCombo').combobox('options').required = aChecked;
$('#iCombo').combobox('textbox').validatebox('options').required = aChecked;
$('#iCombo').combobox('validate');
};
</script>
http://www.jeasyui.com/forum/index.php?topic=6593.0
Related
I have developing some code in Angular JS and i need to disable radio button based on previous selection or change in text box
in JS controller:
PPCO.cusGender = [ {
id : '1',
key : 'Male',
value : 'Male',
disable:false
}, {
id : '2',
key : 'Female',
value : 'Female',
disable:false
}, {
id : '3',
key : 'TG',
value : 'TG',
disable:false
}];
PPCO.changeapplicant = function() {
switch (PPCO.p_SALUTATION.toLowerCase().trim()) {
case 'mrs.':
case 'miss.':angular.forEach(PPCO.cusGender, function(val, key) {
if(val.key != 'Male')
{
val.disable = false;
}
});
break;
}
};
in HTML:
<input type="text" ng-model="PPCO.changeapplicant" class="color" ng-change="PPCO.changeapplicant()">
<label class="radio" ng-repeat="option in PPCO.cusGender">
<input type="radio" name="gender"
ng-model="PPCO.cusgendername" value="{{option.value}}"
ng-disabled="option.disable">
<i></i>
</label>
My question is i able change the "ng-disabled =true" value but it is not enabling again. How to make that
I have created this plnkr for this case: https://plnkr.co/edit/F4JZcf6Nm5Csbxbg
I think you have 2 errors happening at the same time:
You're iterating over one array. So, you don't need to use angular.forEach, you can use array.forEach
Also, most important, you're setting false when the element is mrs. or miss. and it's ok. BUT, you're not setting back to true. So, you will have to include one else clause like this:
if (['mrs.', 'miss.'].includes($scope.applicant.toLowerCase().trim())) {
$scope.cusGender.forEach(function(element) {
element.disable = element.key == 'Male';
});
} else {
$scope.cusGender.forEach(function(element) {
element.disable = false;
});
}
I think that would be all!
I am using jquery, bootstrap multi-select dropdown. I want to populate multi-select dropdown (talukas) on selectionChange event of other normal (single-select) dropdown (city). I am not able to figure out why the multi select dropdown populates on initial load of a controller and why not on selection change of other dropdown. Can you please help me. Thank you.
Scenario - 1 => This works fine
<div ng-controller="tempController" ng-init="initializeController()" ng-cloak>
<select id="multiSelect" name="multiSelect" multiselect=""
multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as
option.label for option in talukas"></select>
</div>
// .js
$scope.selectedTalukas = [];
$scope.initializeController = function () {
$scope.talukas = [
{ talukaId: 1, label: 'Taluka1' },
{ talukaId: 2, label: 'Taluka2' },
{ talukaId: 3, label: 'Taluka3' }
]
}
Scenario - 2 => This DO NOT works fine - WHY
<select id="city" class="form-control select2" name="ddlCity" ng-model="c" ng-options="c as c.name for c in city | orderBy:'name'"
ng-change="selectedCityChange(c)" >
</select>
<select id="multiSelect" name="multiSelect" multiselect=""
multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as
option.label for option in talukas"></select>
$scope.selectedCityChange = function (selectedValue) {
if (selectedValue !== undefined) {
$scope.selectedCity = selectedValue;
$scope.selectedCityId = selectedValue.cityId;
$scope.ajaxPost(selectedValue.cityId,
'/api/Taluka/getTalukasForSelectedCity',
$scope.selectedCityChangeComplete,
$scope.selectedCityChangeError);
}
};
$scope.selectedCityChangeComplete = function (response) {
$scope.talukas = response.data.talukaMasters;
}
I have a backend form which one is connected with a table. It's a configuration field and inside we can find something like a json.
The form already exist (the limitHours field is working fine and you can see check how is it declared below).
So, i just added this new flag enable_rotation_system.
In my form:
->add('limitHours', 'number', array('required' => false, 'mapped'=>false , 'label' => 'Heure limite positionnement'))
->add('enable_rotation_system', 'checkbox', array('required' => false, 'mapped' => false , 'label' => 'Activer les rotations'))
In the view:
<span class="input text fullWidth">
{{ form_label(form.posConfiguration.limitHours) }}{{ form_errors(form.posConfiguration.limitHours) }}
{{ form_widget(form.posConfiguration.limitHours, {'attr': {'value': posConfigurations['configuration']['limitHours'] }} ) }}
</span>
<span class="checkboxInput">
{{ form_widget(form.posConfiguration.enable_rotation_system , {'attr': {'value': posConfigurations['configuration']['enable_rotation_system'] }} ) }}
{{ form_label(form.posConfiguration.enable_rotation_system) }}{{ form_errors(form.posConfiguration.enable_rotation_system) }}
</span>
What happens: when i send my form with my checkbox tick, then in the database field i get: "enable_rotation_system":""
But, true or may be 1 was expected here....
Now, if i send my form with my checkbox not tick, then in the database field the enable_rotation_system flag doesn't exist anymore. Only "limitHours":"18" remains.
Thanks for your help.
EDIT: I'm not sure how the data are sent, but i think angular is used.
{{ form_start(form, { 'attr': {'ng-app': 'moduleApp', 'ng-controller': 'MainCtrl as ctrl', 'novalidate': 'novalidate' } }) }}
At the bottom i got this
angular.module('moduleApp').controller('MainCtrl', ['$scope', function($scope){
var self = this;
self.posConfig = {{ posConfigurations|json_encode|raw }};
self.moduleConfig = {{ configuration|raw }};
self.submitForm = function(event, form) {
if (form.$valid) {
$("#cpn_corebundle_moduleinstance_configuration").val(JSON.stringify(self.moduleConfig));
} else {
event.preventDefault();
}
}
}]);
this.myForm = fb.group({
name: ['', [Validators.required, Validators.minLength(2)]],
date: ['', [Validators.required, Validators.minLength(2)]],
address: ['', [Validators.required, Validators.minLength(2)]],
,
items: fb.array([
this.initItem(),
])
});
initItem() {
return this.fb.group({
item: [''],
itemType: [''],
amount: [''],
presentRate:this.myForm,
total:['']
});
When submitting the form,this item property will be stored by an object.
Example object:
item{
itemName:"name",
itemRate:1000,...}
How can i use the properties of item object and patch the values in my initItem() methord properties?My scenario is like ,When user select a value from dropdown,the item will get updated and i would like to display the values obtained from the item in other formControls.
Example:
<div *ngFor="let item of myForm.controls.items.controls; let i=index">
<div [formGroupName]="i">
<md2-autocomplete [items]="products"
item-text="product"
(change)="handleChange($event)"
placeholder="Product purchased"
formControlName="item"
>
</md2-autocomplete>
<md-input-container >
<input md-input placeholder="Present rate" [value]="presentRate" formControlName="presentRate" >
</md-input-container>
I would like to update the values on presentRate input box automatically.
You can subscribe to valueChanges of a form control and call setValue on another form control.
this.myForm.get('myControlName').valueChanges
.subscribe(val =>
this.myForm.get('myOtherControlName').setValue(val)
);
I'm supposing that you're trying to update the value for each presentRate based on the selected value in md2-autocomplete. If I'm correct the following should work:
Template:
(change)="handleChange($event, i)"
Component:
handleChange($event: any, i: index) {
const control: AbstractControl = myForm.get(`items.${i}.presentRate`);
let newVal: any;
if ($event.value) {
newVal = $event.value.rate;
} else {
newVal = '';
}
control.patchValue(newVal);
}
var phoneIdentification = {
'phoneFiled': {
'label': 'Enter Phone',
'regex': '[0-9]{11,12}'
}
};
var mailIdentification = {
'mailField': {
'label': 'Enter Email',
'regex': '^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$'
},
'passwordField': {
'label': 'Enter Password'
}
};
I have for example this two data. Default I render first one:
$scope.data.dataSource = phoneIdentification;
And Than in view:
<div ng-repeat="(key, item) in dataSource">
<label>{{item.label}}</label>
<input type="text" ng-if="item.regex" ng-pattern="{{item.regex}}"/>
</div>
And I have button also, on click I changed dataSource, I'm setting new value from controller:
$scope.data.dataSource = mailIdentification;
View is updating but, problem is validations, It doesn't update input's Reg-exes>
How it is possible to re-render whole view?
You are missing the regex property in the passwordField field in the mailIdentification object. You need it because you are accessing it in the ng-repeat directive.
Your mailIdentification object should look like this:
var mailIdentification = {
...
'passwordField': {
'label': 'Enter Password',
'regex': `some regex here`
}
};