Whats the most efficient way to get text/html of selected option in mat-select that is part of a form or not a form?
I am really stuck on how to go about it.
<mat-form-field class="w-100">
<mat-select class="w-100" placeholder="{{'Activities.haveEducation' | translate}}" formControlName="edu">
<mat-option value="1">{{'Shared.yes' | translate}}</mat-option>
<mat-option value="0">{{'Shared.no' | translate}}</mat-option>
</mat-select>
</mat-form-field>
and the same when there is no form. I need to get the Yes/No instead of 1 or 0 of the selected ooption
You can use the viewValue property of the selected option:
<mat-form-field class="w-100">
<mat-select #select class="w-100" placeholder="{{'Activities.haveEducation' | translate}}" formControlName="edu">
<mat-option value="1">{{'Shared.yes' | translate}}</mat-option>
<mat-option value="0">{{'Shared.no' | translate}}</mat-option>
</mat-select>
</mat-form-field>
<div>
Selected: {{ select.selected?.viewValue }}
</div>
Related
running into an issue with alpine js.
First of all I have a master component that allows the user to switch between two tabs
#props(['pages', 'blogs'])
<div x-data="init()" class="overview row mb30">
<div class="pageContent__content__languages disFlex mb20 bBottom">
<span
#click.prevent='tab = "pages"'
:class='{ "active": tab === "pages" }'
class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 mr10 pointer">
Pagina's
</span>
<span
#click.prevent='tab = "blogs"'
:class='{ "active": tab === "blogs" }'
class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 bRadius mr10 pointer">
Blogs
</span>
</div>
<div x-show="tab === 'pages'">
<x-form.edit.navigation.pages :pages="$pages" />
</div>
<div x-show="tab === 'blogs'">
<x-form.edit.navigation.blogs :blogs="$blogs" />
</div>
<button type="button" wire:click="navigationAddToMenu" class="btn blue w100 mt10">
Toevoegen aan menu
</button>
</div>
#push('scripts')
#once
<script type='text/javascript'>
function init() {
return {
selected: #entangle('selected'),
tab: 'pages',
};
}
</script>
#endonce
#endpush
These tabs either display pages or blogs depending on which tab is clicked.
Inside of these blade components is just a foreach loop to display the items,
#props(['pages'])
<div style="grid-area: unset" class="pageContent__settings bRadius--lrg disFlex fdCol">
<table class="overview__wrapper">
<tbody class="bRadius--lrg">
#foreach($pages as $page)
<tr class="overview__row bBottom">
<td class="overview__row__checkbox">
<input x-model='selected' value='{{ $page->id }}' type="checkbox"
id="col-row-{{$loop->index}}">
<label for="col-row-{{$loop->index}}"></label>
</td>
<td class="overview__row__name lh1">
{{ $page->page_name }}
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
The blog blade component is nearly identical.
Now the user is able to check a checkbox to add items to their menu, this is binded using the #entangle directive and the x-model on the checkbox.
So far when the user is on the default tab pages and they select a page the correct ID is retrieved from the checkbox, BUT when the user switches tab to the blogs display, and clicks a checkbox the value is retrieved from the pages tab.
e.g.
1 page and 1 blog, page has id of 1 blog has id of 2. User is on the pages tab and clicks on the checkbox the correct value of 1 is now added to the selected array, user switches tabs to blogs and clicks the checkbox the expected behavior would be to have the id of 2 added to the selected array, but it still adds 1.
Inspecting the HTML and the loops do add unique ids to each of their items.
Fixed it, need to make my ids on the input more unique, instead of doing
<input x-model='selected' value='{{ $blog->id }}' type="checkbox"
id="col-row-{{$loop->index}}">
<label for="col-row-{{$loop->index}}"></label>
I added a extra identifier
<input x-model='selected' value='{{ $blog->id }}' type="checkbox"
id="col-row-blogs-{{$loop->index}}">
<label for="col-row-blogs-{{$loop->index}}"></label>
and pages for the pages.
This fixed the issue
How would I avoid doing calculation for 3 inputs using Livewire and use JS instead, but still can bind the inputs and their new values with the component.
Example:
<input id="cash-price"
type="text"
wire:model="total_cache_price"
class="amount-credit">
<input id="deposit"
type="text"
wire:model="deposit"
class="amount-credit">
<input id="trade-in"
type="text"
wire:model="trade_in"
class="amount-credit">
I can easily do a simple calculation using JS, but the properties in Livewire component would still be empty or null after submitting the form. I am trying to avoid livewire requests for every input change.
Note: I understand the deferred updating in livewire, the problem is with the property values not changing.
I will show you an example in alpine js + livewire way.
Here I want to set value in two inputs from a selected option in select.
Please note that x-ref is used in alpine to directly access DOM elements without using getElementById.
<div x-data="{
from_date : #entangle('from_date').defer,
to_date : #entangle('to_date').defer,
dateChange(){
select = this.$refs.years;
this.from_date = select.options[select.selectedIndex].getAttribute('data-from');
this.to_date = select.options[select.selectedIndex].getAttribute('data-to');
},
resetFilters(){
this.net_balances = false;
}}">
<select x-ref="years" #change="dateChange()">
<option value="">Year</option>
#foreach ($years as $key => $year)
<option wire:key="{{ 'years'.$key }}" data-from="{{ $year->from_date }}" data-to="{{ $year->to_date }}" value="{{ $year->id }}">{{ $year->name }} </option>
#endforeach
</select>
<div>
<text type="date" x-model="from_date" />
</div>
<div >
<text type="date" x-model="to_date" />
</div>
I haven't been able to find anything relating to an action to submit an update request when we click away. Something like wire:clickaway = "update( {{ example -> id }} )"
Essentially, I am trying to create the effect of when a user clicks on the title, it will open an input box. Than when user clicks away, it will save the data that has been updated in the box.
Right now, I got this working with a checkmark icon appearing when the edit is true using Alpine
<div x-data="{edit : false}" >
<h2 #click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>
<div x-show="edit === true">
<input name="title" type="text" placeholder="{{$example -> title}}" wire:model="title" >
<i class="bi bi-check " wire:click="update({{ $example->id }})" #click="edit = false"></i>
</div>
</div>
I wanted to change this to something like
<div x-data="{edit : false}" >
<h2 #click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>
<input x-show="edit === true" name="title" type="text" placeholder="{{$example -> title}}" wire:model="title" wire:clickaway="update({{ $example->id }})" #click.away="edit = false" >
</div>
Is there a way to pass the submit of update({{ $example->id }}) using the Alpine JS #click.away?
The answer is what #Dirk Jan said
wire:change="update({{ example -> id }})"
How to add i18n in ngx-mat-select-search palceholderLabel
<div class="form-group col-md-6 mb-lg-5 mb-4">
<mat-form-field class="example-full-width w-100">
<mat-select (selectionChange)='vehicle_maker_updated($event)' formControlName="vehicleMakerValue" placeholder="Motor Make" i18n-placeholder>
<mat-option>
<ngx-mat-select-search formControlName="vehicleMakerFilterInputValue" placeholder="Select Motor Maker" [noEntriesFoundLabel]="'No matching vehicle makers found'" (ngModelChange)='filter_vehicle_makers($event)' i18n-placeholder></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let vehicle_maker_option of filtered_vehicle_maker_options" [value]="vehicle_maker_option.id">
{{vehicle_maker_option.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="vehicleMakerValue.hasError('required')" i18n>
Select motor make
</mat-error>
</mat-form-field>
</div>
i have already added the i18n-placeholder but its not working
you need to use the placeholderLabel attribute (see https://github.com/bithost-gmbh/ngx-mat-select-search#inputs)
<ngx-mat-select-search
formControlName="vehicleMakerFilterInputValue"
placeholderLabel="Select Motor Maker"
[noEntriesFoundLabel]="'No matching vehicle makers found'"
(ngModelChange)='filter_vehicle_makers($event)'
i18n-placeholderLabel>
</ngx-mat-select-search>
where the placeholderLabel and i18n-placeholderLabel attributes are relevant
I am working with ionic2, I have a list of items and each item holds an array of users:
<ion-list item-left>
<ion-item *ngFor="let item of items;">
<ion-label>
{{ item.name }}
</ion-label>
</ion-item>
</ion-list>
I am trying to add a horizontal avatars scroll to every item in the list
<ion-list item-left>
<ion-item *ngFor="let item of items;">
<ion-label>
{{ item.name }}
<br>
<ion-scroll scrollx="true" style="height: 50px;">
<ion-avatar *ngFor="let user of getAllUsers(item)">
<img src="{{ user.avatar }}" style="max-width:2.5rem;max-height:2.5rem;">
</ion-avatar>
</ion-scroll>
</ion-label>
</ion-item>
</ion-list>
Before I added style="height: 50px;" to ion-scroll nothing changed. After this addition the avatars are here but they are one bellow the other and not in a one row (and of course without horizontal scrolling).
How can I fix that?
P.S
Is it possible to add width to the scroller? I don't want it to take the whole page width.