I have hidden mat-checkbox which is binded to formControl and I need to trigger this formControl change while clicking on some icon (which is supposed to be binded to checkbox). But I can't figure out how to trigger manually that change event. Unfortunatelly .toggle() method of mat-chechbox doesn't change my formControl value and doesn't trigger change event
<mat-checkbox [hidden] #availabilityCheckbox (change)="toggleInputs(i)" formControlName="available"></mat-checkbox>
<mat-icon
(click)="availabilityCheckbox.toggle()"
class="variants-action-icon m-r-1"
>
{{ variationsFormArray.controls[i].get('available').value ? 'visibility' : 'visibility_off' }}
</mat-icon>
In your case please try out this,
<mat-icon
(click)="availabilityCheckbox._onInputClick($event)"
class="variants-action-icon m-r-1"
>
{{ variationsFormArray.controls[i].get('available').value ? 'visibility' : 'visibility_off' }}
</mat-icon>
Actually _onInputClick($event) is the event we need to call on checkbox template reference. It will trigger the (change) event.
if you use reactive form, use it
variationsFormArray.controls[i]?.get('available')?.setValue(!variationsFormArray.controls[i]?.get('available')?.value);
it would be better to extract this in a function it your ts
Related
https://stackblitz.com/edit/angular-gd5gcg?file=app/dialog-overview-example-dialog.html
In this example of the official documentation, I see that the value returned when you close the matdialog is this
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
But what happens if you want to send a value calculated in a function previously for example like this
getData(){
this.datos=[1,2,3,4];
}
How can you make that function be called before returning the value to the component that opened the matdialog?
Thanks
The solution is quiet simple
<button mat-button (click)="getData()" [mat-dialog-close]="data.animal"
Thanks
I have an issue related to the existing question
Cannot disable matInput element with this
Suggested answer works just fine:
ngOnInit() {
this.form = this.fb.group({
name: new FormControl({ value: '', disabled: this.disabled })
});
But when I change this.disabled value to true - disabled attribute isn't changed. Is there a way to change the disabled attribute for matInput?
You can't use that form, because when you create a FormControl you are passing that value, in your case the value of this.disabled. You are not binding properties, you are only passing a value to make some checks, this value is not reflecting input properties' changes.
You can't achieve your goal by this way, you need to enable and disable your input manually, like this:
let control = this.form.get('name')
control.disabled ? control.enable() : control.disable();
Obviously you can put it into a click event directly into your template, something like this:
<button (click)="this.form.get('name').enable()">Enable</button>
The md-autocomplete provides a class named md-not-found in the md-virtual-repeat-container when you are trying to search for an element that does not exist in the dropdown, displaying an error message underneath. When you remove focus from the input element, the md-not-found is removed. The autocomplete therefore gives a false impression of having a valid input, as the user is not presented with any feedback.
Is there any way to keep the class "md-not-found", even after you unfocus the input element?
md-autocomplete official demo: https://material.angularjs.org/latest/demo/autocomplete
Update
I have made a temporary solution:
<label class="{{selectedItem !== null || searchText === '' ? '' : 'label-error'}}">Name</label>
The label-error class applies a red color.
The solution is not an answer to the question per se, but offers an alternative quick fix
I used md-autocomplete inside the md-chips and its working as well as you want.
When request return noContent(204) md-not-found is being visible and it isn't disappear until user start texting again.
<md-content layout="column">
<md-chips
class="md-input"
ng-model="myItem"
md-autocomplete-snap
md-on-add="change()"
md-on-remove="change()"
required
md-require-match="true"
md-transform-chip="reformr($chip)"
md-separator-keys="keys">
<md-autocomplete md-selected-item="selectedItem"
md-no-cache="true"
md-search-text="search.text"
md-items="item in getSuggestedItems()"
md-item-text="item.name"
md-min-length="0"
placeholder="{{ 'textItemName' | translate }}"
required
md-input-name="suggestedItem"
md-search-text-change="listSuggestedItems(search.text)">
<span md-highlight-text="search.text" md-highlight-flags="^i">{{item.name}}</span>
<md-not-found>
{{'no_item_found' | translate}}
</md-not-found>
</md-autocomplete>
</md-content>
i dynamically generate this html code to delete an item with an id=3 for example:
"<a href='javascript:delete('" + item.id + "')>";
when i click this, it will execute delete('3');i change it as:
<a href='#delete' data-rel='popup' data-position-to='window' data-transition='pop'>
and add a dialog for this tag:
<div data-role='popup' id='delete'>
<a href='javascript:delete(item.id)' data-role='button'>delete</a>
</div>
how to transfer the item's id to this popup dialog's tag, any suggestion?
I feel like you might be going through the wrong way to achieve this. Some things to change :
delete is a JavaScript keyword. You cant use it as a function.
Don't use the onclick attribute. It results in duplication. Instead, you could use a click event for repetitive actions.
You seem to have gotten the idea to create multiple popups (one for each click of the anchor tag). I think one would do.
Now, in correlation with whatever I've just put down, here's some sample code.
HTML
<a href='#' class='delete' data-num='" + i + "'>Delete me</a>
(Note the data-num attribute in the HTML, the addition of class attribute and the removal of onclick in your code)
It could be replaced by JS which looks like this :
$(this).on("click", ".delete", function (e) {
//prevent default action
e.preventDefault();
//take the id value
var id = $(this).data("num");
//send that value to the popup
$("#delete").find("span").html(id).end().popup("open");
});
A demo fiddle for you to look at : http://jsfiddle.net/hungerpain/AxGde/2/
How can I change value of combobox using Tchromium Delphi?
Version Tchromimum DCEF3
<td class="droplabels" nowrap="nowrap">Лист</td>
<td colspan="3">
<div class="ui-widget">
<select id="sheet" name="sheet" style="font-size:0.7em;width:761px;"
class="form_select" onchange="showSheet(this.value);">
<option value="1" selected="selected">Account List </option>
<option value="2">Merchant list</option>
</select>
</div>
</td>
try this but not worked...
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("sheet").selectedIndex=2;', 'about: blank', 0);
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("providerField").onchange();', 'about: blank', 0);
There's an ExecuteJavascript on it. So you can manipulate everything on it with Javascript.
If you want to change that combobox value , then change it with using DOM.Get its id using "document.getElementById", then change its selectedIndex by accessing its selectedIndex.
But , that'll not triggering onChange event.
So , you need to call it manually using javascript again.
Here's the code to change it's selectedIndex :
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("sheet").selectedIndex='+comboboxIndex+';', 'about: blank', 0);
To trigger onChange event manually :
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("providerField").onchange();', 'about: blank', 0);
Change Chromium1 to your TChromium variable object name.
Here's for more information about Select
http://www.w3schools.com/jsref/dom_obj_select.asp
If you don't know anything about DOM , read it here
http://www.w3schools.com/htmldom/default.asp
In simple way , you just need to get the DOM object of it then do what you want by accessing and modifying its properties
Sorry for my bad English.
edited