Angular JS select box from table cell disabled - javascript

I have html code with AngularJS like below for select box inside table cell.
<td>
<select ng-model="row.status" ng-change="toggle_syslog_filter(row.id,row.status)" >
<option value="0">Disabled</option>
<option value="1">Enabled ( Log Only )</option>
<option value="2">Enabled ( Alerts Active )</option>
</select>
<span style="color:red;">
<i class="fa fa-remove" ng-click="delete_filter(row.id)"></i>
</span>
</td>
but it adds some classes to select box
<td>
<select ng-model="row.status" ng-change="toggle_syslog_filter(row.id,row.status)" class="ng-pristine ng-valid ng-touched">
<option value="0">Disabled</option>
<option value="1">Enabled ( Log Only )</option>
<option value="2">Enabled ( Alerts Active )</option>
</select>
<span style="color:red;">
<i class="fa fa-remove" ng-click="delete_filter(row.id)"></i>
</span>
</td>
it adds the classes
ng-pristine ng-valid ng-touched
and it made the select box disabled.

So what is happening is because of ng-change basically ng-change directive tells AngularJS what to do when the value of an HTML element changes.
So it might be possible that the expression evaluating in ng-change is false. Just for the sake of checking try putting the value of ng-change to ng-change='True' and see if it still disable. Because pristine valid and touched are used to validate if the input field

Related

(click) funtion not triggering in chrome angular 6

(click) funtion not triggering in my select tag when i use google chrome but its works in mozila
this is my code
<div class="col-xl-4 col-lg-9">
<select formControlName="deptId" class="form-control m-input" >
<option>SELECT</option>
<option *ngFor="let item of listAllDepartment" (click)="getdoctorlistid(item.dept_id)" value={{item.dept_id}}>{{item.dept_name}}</option>
</select>
</div>
Thanks
You should use ngModelChange with select instead of click
<selectformControlName="deptId" class="form-control m-input" [(ngModel)]="itemSelected" (ngModelChange)="getdoctorlistid(itemSelected)">
You can't add such an event to an <option>
You can add
<select
[(ngModel)]="selectedItem"
(ngModelChange)="getdoctorlistid(selectedItem)">
<option>SELECT</option>
<option
*ngFor="let item of listAllDepartment"
(click)="getdoctorlistid(item.dept_id)"
value={{item.dept_id}}>
{{item.dept_name}}
</option>
</select>
Edit: Like #Sajeetharan answered

*ngif Not working after first click. Angular 6

What I want to Achieve is that I have a Select field in angular6 on the basis of the selected value I want to hide and display another div.
Here is the code.
<div class="form-group">
<label for="servicePriviledges">Managed</label>
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option value="false">False</option>
<option value="true">True</option>
</select>
<br>
</div>
<div class="form-group" *ngIf="managed">
<label for="managerType" >Manager Type</label>
<select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
*ngIf does make an impact when I switch it for the first time but not after that. the change is not detected.
I have even tried setting up the visibility attribute of style as well as [hidden] directive but got the same result.
I have even tried giving an on change method but no change in result.
version information:
"#angular/core": "^6.1.6",
"#angular/forms": "^6.1.6",
Both these controls are under a form 'ngForm'.
Another approach is to attach [ngValue] directive for every option.
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>
managed will have a string value of 'true' or 'false' update ngIf like this
<div class="form-group" *ngIf="managed === 'true'">
...
</div>
or you can use ngValue so managed will have a boolean value of true , false
<select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>

Accessing each part of an array using (change) Angular 5

I am trying to create a box, where you can click on each option within it and it will filter through data coming from firebase database. So far, I have it working where you can click on each of them. However, I can only get it to perform one task.
Each of the options comes from this array:
items: number[] = [1,2,3,4,5,6,7,8,9];
and the filtering comes from this function:
filterByBedrooms(bedrooms: number) {
this.bedFilter.next(bedrooms);
console.log('clicked')
}
and then I have this form where I call the function:
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms(items[4])">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
Now obviously in this I bind to the function and the array like so:
(change)="filterByBedrooms(items[4])"
I am aware that what I need to do is somehow bind to it like this:
(change)="filterByBedrooms(item)"
However, the *ngFor comes after this part, so it does not work.
My question is, how do I bind (change) to each of the options (coming from the array) within my select box and not just one part of the array?
You don't bind your event to your options, you bind it to your select.
You can see it for yourself : the select carries the ngModel attribute, not the options.
See it as an input of type text, with predefined results.
So simply call your method with the bound ngModel like this.
<select
class="form-control form-control-lg small-drop-down"
type="number"
[(ngModel)]="bedrooms"
name="bedrooms"
(change)="filterByBedrooms(bedrooms)">
You can do like this, just declare an identifier for select and use the value in your method.
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms(bedrooms.value)">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" #bedrooms>
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
Also I noticed you have binded the variable bedrooms to select. That means that you have that variable in your controller so you can redefine your filterByBedrooms method to something like this
filterByBedrooms() {
this.bedFilter.next(this.bedrooms);
console.log('clicked')
}
If you are using the second example than your form will look like this
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms()">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" >
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
I would suggest you to use (ngModelChange) event as far as you use ngModel binding, so the code should look like:
<form #fSearchPropertiesByBedrooms>
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
And actually I'm not sure you need a form for this particular control as I see you commented the submit button, so this can be simplified to:
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
Don't forget to add value check on filterByBedrooms function as in your case it can by invoked with undefined value.

Make drop down required only if it has values in AngularJs

I have two drop downs in form. First drop down has 4 values, but second drop down has value only if value with index 3 is selected in first drop down, otherwise is empty.
Code I have always preform validation and checks if both drop downs has values.
Is there an easy way in angular to preform validation for second drop down only if it has values inside of it?
In other words, if drop down is not empty that user has to select value.
This is my code for drop downs:
<form name="addNewTestSession" class="form-horizontal" novalidate>
<div class="row">
<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.event.$touched && addNewTestSession.event.$invalid }">
<label for="event">Event<span class="mandatory">*</span></label>
<select id="event" name="event" class="form-control" ng-model="newTestSessionCtrl.formData.event"
ng-options="event.name for event in newTestSessionCtrl.viewData.events"
ng-required="true">
<option value="" disabled selected>Select</option>
</select>
<span ng-show="addNewTestSession.event.$touched && addNewTestSession.event.$invalid"
class="form-control-feedback fa fa-warning"
uib-popover="This field is required."
popover-trigger="'mouseenter'"
popover-placement="auto right"
popover-class="additional-info"></span>
</div>
<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.subevent.$touched && addNewTestSession.subevent.$invalid }">
<label for="subevent">Sub-Event<span class="mandatory">*</span></label>
<select id="subevent" name="subevent" class="form-control" ng-model="newTestSessionCtrl.formData.subevent"
ng-options="subevent.name for subevent in newTestSessionCtrl.formData.event.subevents"
ng-required="true">
<option value="" disabled selected>Select</option>
</select>
<span ng-show="addNewTestSession.subevent.$touched && addNewTestSession.subevent.$invalid"
class="fa fa-warning form-control-feedback"
uib-popover="This field is required."
popover-trigger="'mouseenter'"
popover-placement="auto right"
popover-class="additional-info"></span>
</div>
</div>
</form>
As you can see 'subevent' drop down is always required. How can I change it to be required only if it has values inside?
You can give a condition to ng-required.
You didn't give your controller code, but I will assume that newTestSessionCtrl.formData.event.subevents is equal to [] when empty.
Your condition is then
<select id="subevent" name="subevent" class="form-control"
ng-model="newTestSessionCtrl.formData.subevent"
ng-options="subevent.name for subevent in newTestSessionCtrl.formData.event.subevents"
ng-required="newTestSessionCtrl.formData.event.subevents.length > 0"
>
Try something like:
ng-required="newTestSessionCtrl.formData.event.subevents.length > 0"

Add/Remove elements using JavaScript (add/remove fields with numbered ids and names)

I have a form with select elements, and I would like to add and remove by choice some of these elements. This is the html code (also have jsfiddle here http://jsfiddle.net/txhajy2w/):
<form id="Form" action="#" method="POST">
<div id="FormContainer">
<div class="Row" id="container_0">
<a id="delete_link_0">
<i class="glyphicon glyphicon-minus"></i>
</a>
<select class="type_name" name="type_name_0" id="type_name_0">
<option value="">Select an Option</option>
<optgroup label="All Options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
<a id="new_link_0">
<i class="glyphicon glyphicon-plus"></i>
</a>
</div>
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
</form>
What I would need is:
clicking on the plus sign would generate a new row (including a div, select and the plus/minus links). However I would need for the new row, new ids and names for the elements (using numbers, for example type_name_1, type_name_2 and so on, changing only the index number).
clicking on the minus sign, would delete that specific line, and re-number all id's of the remaining elements.
Ok to add select element again with new ID and to delete the last added select element you can do as below:
DEMO
$('#new_link_0').on('click',function(){
var select=$('.wrap').find('select:last').clone();
var id=$(select).attr('id').split('_')[2];
$(select).attr('id','type_name_'+parseInt(id+1));
$(select).attr('name','type_name_'+parseInt(id+1));
$(select).insertAfter('.wrap select:last');
});
$('#delete_link_0').on('click',function(){
$('.wrap').find('select:last').remove();
});
UPDATE
To add a new Item everytime and reset the whole set of ids to proper count you can do as below but you need to follow the below html structure:
DEMO
HTML
<form id="Form" action="#" method="POST">
<div id="FormContainer">
<div class="Row" id="container_0">
<div class="wrap">
<div class="element"> //wrap each cloning element inside a div
<a id="delete_link_0" href="#" class="minus">
<i class="glyphicon glyphicon-minus"></i>
</a>
<select class="type_name" name="type_name_0" id="type_name_0">
<option value="">Select an Option</option>
<optgroup label="All Options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
<a id="new_link_0" href="#" class="plus">
<i class="glyphicon glyphicon-plus"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
JS
$(document).on('click','.plus',function(){
var element=$('.wrap').find('.element:last').clone();//clone last element always
var id=parseInt($(element).find('select').attr('id').split('_')[2])+1;
$(element).find('select').attr('id','type_name_'+id);
$(element).find('.plus').attr('id','new_link_'+id);
$(element).find('.minus').attr('id','delete_link_'+id);
$(element).find('select').attr('name','type_name_'+id);
$(element).insertAfter('.wrap .element:last'); //insert at the end once modification to the cloned elements has been done
});
$(document).on('click','.minus',function(){
if($('.wrap .element').length===1) //check for the length if there is only one element then prevent it from deleting
{
alert('Cannot delete this! Atleast one item must be there');
return false;
}
$(this).parents('.element').remove();
$.each($('.element'),function(index,value){//find each .element and reset the `ids` of the controls inside it
$(this).find('.minus').attr('id','delete_link_'+index);
$(this).find('.plus').attr('id','new_link_'+index);
$(this).find('select').attr('id','type_name_'+index).attr('name','type_name_'+index);
});
});
Note: Resetting the ids might create problem in realtime if you have such operations carried out in you flow

Categories