I am passing treeselect component as a slot as below.
<template v-slot:filters>
<treeselect v-model="value" :options="filterTreeData" />
</template>
My slot are placed as below.
<div class="rule-filter-container">
<slot name="filters"></slot>
</div>
<div class="rule-operator-container">
<el-select
v-if="treeSelect.selectedValue.dataType !== dataType.Checkbox && treeSelect.selectedValue.dataType !== dataType.Radio"
v-model="value"
filterable
placeholder="Type Or Select">
</el-select>
</div>
As in above I have written v-if condition for the sake of example.
It is not working as of now. But I want to access treeSelect's selected value. and based on that I want to keep or remove "el-select" component.
So how do I access that selected value of treeselect in child component which is passed as a slot?
You should be able to bind the slot's value to the component.
<template v-slot:filters :slotValue="value">
<treeselect v-model="value" :options="filterTreeData" />
</template>
And in the component:
<div class="rule-filter-container">
<slot name="filters"></slot>
</div>
<div class="rule-operator-container">
<el-select
v-if="slotValue !== dataType.Checkbox && slotValue !== dataType.Radio"
v-model="value"
filterable
placeholder="Type Or Select">
</el-select>
</div>
Related
I have the following form in my angular project:
<input type="email" class="form-control" placeholder="Email" validate-onblur aria-label="email">
<div *ngIf="!loginForm.controls['username'].pristine && loginForm.controls['username'].dirty && loginForm.controls['username'].hasError('required')">
<p class="error-msg">{{messages.EMAIL_REQ}}</p>
</div>
The condition in the <div> tag in ngIf, I want to use this same condition in the <input> tag above, to add a class to that element, how can I achieve this?
Something like this (myCondition):
<input ngClass="{'error': myCondition}" type="email" class="form-control" placeholder="Email" validate-onblur aria-label="email">
<div *ngIf="myCondition">
<p class="error-msg">{{messages.EMAIL_REQ}}</p>
</div>
I am new to angular so don't know if it possible or not.
I thought of creating a function in the component and calling this function with onblur attribute, but with this approach I have to create several functions, because the form has several fields with their specific conditions.
So how can I do this in the html file itself?
Yes it's possible, you could wrap the elements in a <ng-container> tag and extract the condition using *ngIf directive. It's commented out in the final rendered DOM.
<ng-container *ngIf="({res: (!loginForm.controls['username'].pristine && loginForm.controls['username'].dirty && loginForm.controls['username'].hasError('required'))}) as cond">
<input type="email" [class.error]="cond.res" class="form-control" placeholder="Email" validate-onblur aria-label="email">
<div *ngIf="cond.res">
<p class="error-msg">{{messages.EMAIL_REQ}}</p>
</div>
</ng-container>
I've also replaced [ngClass] with [class.error].
Although it's tempting to ignore the object in the *ngIf like
<ng-container *ngIf="(!loginForm.controls['username'].pristine && loginForm.controls['username'].dirty && loginForm.controls['username'].hasError('required')) as cond">
...
</ng-container>
it would counter-intuitive as the <input> would not be rendered when the condition is false. Wrapping it in an object would ensure the elements inside would be rendered even if the outer *ngIf in the <ng-container> would be false.
I have dropdown in the form. based on selecting the dropdown value if it matches for a specific value i need to show a fiels/lable beside to the dropdown. I took a form in side i wrote like
<div className='row'>
<div> <label ....>
<select
name="trnType"
id="trnType"
.......
onChange={event => {values.trnType = event.target.value;}}
defaultValue={values.trnType}
>
{trnType.map((def, key)=>(
<option key={def.value} value={def.value}>
<def.label>
</option>
))}
</select>
</label>
</div>
<div> field shuld display based on value match in above drop down</div>
</div>
any one please help me on this
You have to have state. If we talk about the function component.
const MyForm = () => {
const [selectBoxValue, setSelectBoxValue] = useState(here place 2 options)
return <div className='row'>
<select onChange={(e) => setSelectBoxValue(e.target.value)}>
<option>{selectBoxValue[1]}</option>
<option>{selectBoxValue[1]}</option>
</select>
{selectBoxValue === firstOption
? <div> some value </div>
: <div> another value </div>
</div>
}
I am using Template Driven for my Angula'rs form and I have a div that repeats several times (according to a counter variable).
The thing is , I need the required validation only for the first item in this list and I 'm not sure how to do that.
<div class="form-group required margin-left" *ngFor="let hore of horim;let i = index">
<label class="control-label translate-label" [id]="'lblShemPratiHore'+i">{{selectedLanguage.shemPrati}}</label>
<!-- <img src="../../../assets/images/parent.png" alt="shem prati"> -->
<input
[id]="'shemPratiHore'+i"
[(ngModel)]="hore.shemPrati"
class="form-control input-lg"
[name]="'shemPratiHore'+i"
[attr.aria-describedby]="'lblShemPratiHore'+i"
#shemPrati="ngModel"
required
[ngModelOptions]="{ updateOn: 'blur' }"/>/>
<div *ngIf="shemPrati.errors?.required && shemPrati.touched" class="alert alert-danger">
Required Field
</div>
</div>
try binding to the required attribute if index is equal 0.
[required]="index == 0"
The anwer for this post is as follow:
[required]="i==0"
I have a list of drop-down elements, which is indexed by an *ngFor loop.
<div class="item-wrapper" *ngIf="showItems">
<div class="wrap-collapsible" *ngFor="let item of items; let i = index">
<input id="{{i}}" class="toggle" type="checkbox">
<label for="{{i}}" class="dropdown-toggle" tabindex="0" (click)="selectItem(item)">
Threat {{item.id}}: {{item.category}}
</label>
<div class="collapsible-content">
<div class="content-wrapper">
<p class="title">{{item.title}}</p>
</div>
</div>
</div>
</div>
Per default, the checkbox input is selected on click, and stays checked when selecting other elements.
How would I go about unchecking all elements except the last one clicked?
I've tried doing...
<input id="{{i}}" type="checkbox" [checked]="i == selectedElement">
...while passing the index in the selectItem() method, where selectedElement is set to i. This doesn't work, because then no item is selectable.
Can anyone give me a push in the right direction?
Bind to the change function of your input :
<input id="{{i}}" class="toggle" type="checkbox" (change)="setLastClicked(item)">
In your TS :
setLastClicked(item) {
this.lastSelected = item;
}
You can now use that memory reference to compare to the items when you [un]check them all :
toggleCheck() {
this.items.forEach(item => item.checked = {
if(item === this.lastSelected) return;
item.checked = !item.checked;
});
}
With a memory reference, you don't need the ID anymore.
I have a foreach binding where I don't want to display a checkbox if it is the first row:
<div data-bind="foreach: items" class="row">
<div class="col-sm-1">
<input type="checkbox" data-bind="if: $index() > 0,checked: $data.isChecked, click: $parent.removeRow">
</div>
<!-- other cols -->
</div>
However, the checkbox is being displayed for each row.
The if binding causes a section of markup to appear in your document
(and to have its data-bind attributes applied), only if a specified
expression evaluates to true (or a true-ish value such as a non-null
object or nonempty string).
(source)
data-bind: if directive will remove the content of the tag you are applying the directive to. Wrapping your input in a div will do the trick:
<div cata-bind="if: $index() > 0">
<input type="checkbox" data-bind="checked: $data.isChecked, click: $parent.removeRow">
</div>