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>
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 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 the following radiobuttons:
<div class="nextgen-goal-overall-radiobuttons pull-left">
<label class="nextgen-input-label">Overall Goal</label>
<div class="radio-button-item pull-left" *ngFor="let goalType of goalTypesRadioButton">
<p-radioButton class="nextgen-radio-button" name="{{goalType.id}}" value="{{goalType.id}}" label="{{goalType.description}}" [(ngModel)]="selectedGoalTypeId"></p-radioButton>
</div>
</div>
When I click on any radio button the selectedGoalTypeId is updated with the corresponding value.
My problem here is that on my HTML I have the following conditional divs:
<div class="nextgen-input-container nextgen-goal-input pull-left">
<span *ngIf="selectedGoalTypeId === 1" class="goals-currency-icon">{{currencyFormat}}</span>
<label class="nextgen-input-label nextgen-target-group-label">{{selectedGoalTypeId}}</label>
<input class="nextgen-input" [class.nextgen-input-budget] = "selectedGoalTypeId === 1" type="number" pInputText placeholder="">
</div>
<div *ngIf="selectedGoalTypeId === 3" class="nextgen-goal-frequency-dropdown pull-left">
<label class="nextgen-input-label nextgen-target-group-label">Frequency</label>
<p-dropdown [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" dropdownIcon="fa fa-angle-down" class= "nextgen-dropdown" [options]="FrequencyLookup" [(ngModel)]="selectedFrequency" value="selectedFrequency"></p-dropdown>
</div>
Asking if selectedGoalTypeId is 1 or 3 it shows some divs or not.
The problem here is that the selectedGoalTypeId is updated correctly. I put some label on the HTML to check. But the divs are not changed according to the conditions it always displays the same despite of the value of selectedGoalTypeId. What I'm missing here?
In p-radioButton change value="{{goalType.id}}" to [value]="goalType.id"
And I suppose that *ngIf="selectedGoalTypeId === 1" should be placed on the upper div than on the span
Posted the solution Here
PS : I guess goalType.id and selectedGoalTypeId are both number
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>
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.