Is there a way to add an icon inside primeng p-autoComplete?
<div class="p-mr-2 p-input">
<p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location"
[suggestions]="results" field="name" placeholder="Search location">
</p-autoComplete>
</div>
I am looking for a way to add a location icon inside this auto-complete element
PrimeNg provides InputGroup option which can be used to add icon for input.
<div class="p-mr-2 p-input">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location [suggestions]="results" field="name" placeholder="Search location">
</p-autoComplete>
</div>
</div>
Here instead of $ add required location icon.
there is a Property "dropdownIcon" takes the name of an icon the default
"pi pi-chevron-down".
<p-autoComplete
[group]="true"
field="label"
[multiple]="true"
[dropdown]="true"
dropdownIcon="pi pi-search"
>
Related
I am trying to reset my form input value and it's not resetting the value nor the ngmodel control state.
here is my HTML:
TrackPage.html:
<form #trackForm="ngForm">
<div class="form__field" style="padding-top: 10px; ">
<search-input [(inputModel)]="trackingNumber" [label]="'tracking.tracking-placeholder' | translate">
</search-input>
</div>
<div>
<button id="trackBtn" type="button" class="track-button" [style.backgroundColor]="brand.style.mainColor"
(click)="searchTracking(); trackForm.reset()"
[style.color]="brand.style.fontColor">{{ 'tracking.tracking-btn' | translate | uppercase}}
</button>
</div>
</form>
Input Component:
<input id="trackingNumber" [(ngModel)]="inputModel" [ngClass]="{ 'form__field--has-value': inputModel }" type="text"
(ngModelChange)="changeData()" [required]="true" [style.font-family]="fontFamily" #spy />
<label for="trackingNumber" [style.font-family]="fontFamily">{{label}}</label>
Input Component.ts:
changeData() {
this.inputModelChange.emit(this.inputModel);
console.log(this.inputModel);
}
Here trackForm.reset() is not working. The only difference I see from Angular IO documentation is I use separate input component.
Not sure why it's not working.Any help?
It looks like the HTML element you want to reset is not inside the form you're calling.
Try to move it outside of the component and put it inside form or just refresh the model you're giving as an input when you want to refresh the form.
Hope it helps!
Please go through the link(https://ng-select.github.io/ng-select#/multiselect-checkbox) to know ng-select multi select checkbox.
I am trying to use the ng-select "Group selects children" in my angular 6 application.
I am having problem using ng-select "Group selects children" with Reactive Forms instead of template driven forms.
I have tired it as
<ng-select
[items]="userGroupsList"
[multiple]="true"
bindLabel="name"
groupBy="gender"
[selectableGroup]="true"
[selectableGroupAsModel]="false"
[closeOnSelect]="false"
bindValue="id"
formControlName="userGroups" placeholder="Select a user group">
<ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupParent"/> {{item.gender | uppercase}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupChild"/> {{item.name}}
</ng-template>
</ng-select>
I have used the same data of the multiselect-checkbox-- [items]="userGroupsList"
https://github.com/ng-select/ng-select/blob/master/demo/app/shared/data.service.ts -- getMockPeople() has the data
So here can i use the [(ngModel)] as well as formControlName on the input how can i child elements are selected when the parent is select as in the example
Please help....!
To make this work with formGroup : keep the formControlName on the ng-select who will be bind to your formGroup.
The problem is those input in the template. For me the best solution is to keep using ngModel like in the example. But you must make angular understand that is as nothing to do with the fromGroup so you can add the option standalone on it.
<input id="item-{{index}}" type="checkbox" [(ngModel)]="item$.selected" [ngModelOptions]="{ standalone : true }" />
There is an other way to do that without the ngModel :
<input id="item-{{index}}" type="checkbox" [checked]="item$.selected" />
My dropdown item was not getting selected on clicking the item in the dropdown, it was only getting checked on clicking on the checkbox. This worked for me thanks
I'm looking to add validation error messages for an Angular Autocomplete component. I followed an example I found in How to add validation attributes to md-autocomplete angular material directive, but I do not want to use a floating label. How can I achieve this? Here's my HTML:
<md-autocomplete md-input-id="person"
md-input-name="person"
md-item-text="item.displayName"
md-items="item in getPeople(searchText)"
md-search-text="searchText"
md-selected-item="model.person"
md-selected-item-change="form.person.$setValidity('itemInList', !!item)"
md-min-length="0"
placeholder="Enter a person"
md-select-on-focus
class="output"
required>
<md-item-template>
<span class="md-item" md-highlight-text="searchText" md-highlight-flags="^i">{{item.displayName}}</span>
</md-item-template>
<md-not-found>
<span class="md-item">No matches found.</span>
</md-not-found>
</md-autocomplete>
<div ng-messages="form.allowWrite.$error" ng-if="form.allowWrite.$touched" class="help-block">
<div ng-message="required">Person is required</div>
<div ng-message="itemInList">Person was not selected from the list</div>
</div>
I found that adding the "md-no-float" attribute fixed my problem. Here's an updated snippet:
<md-autocomplete md-input-id="person"
md-input-name="person"
md-item-text="item.displayName"
md-items="item in getPeople(searchText)"
md-search-text="searchText"
md-selected-item="model.person"
md-selected-item-change="form.person.$setValidity('itemInList', !!item)"
md-min-length="0"
placeholder="Enter a person"
md-select-on-focus
class="output"
md-no-float
required>
I'm making a project in angular. When i click on the checkbox i want that there is a line trough the text. But when i click on the checkbox nothing happens ..
Can you help me ?
Thanks !
<h3>Todos list</h3>
<ul class="list-group">
<li *ngFor="let todo of todos; let i = index" class="list-group-item">
{{todo.text}}
<p [ngClass]="{strike: deleted}">test</p>
<label>
<input type="checkbox" ng-model="deleted">
</label>
<button class="btn btn-danger btn-small" (click)="deleteTodo(i)">X</button>
</li>
</ul>
At first, in Angular it's [(ngModel)], not ng-model as in AngularJs.
Also, you can't have a single variable (deleted) to handle all items in your *ngFor.
To make it wok apply the changes:
...
<p [ngClass]="{strike: todo.deleted}">test</p>
<label>
<input type="checkbox"
[(ngModel)]="todo.deleted">
</label>
...
DEMO
use <s> tag instead of <strike> tag
Ex:
if you want <strike> Not Aailable </strike>
and it is not supported by angular 4 and above versions then,
use <s>Not Available</s>
This is my HTML code. It's a custom DropDownList that I made. Can someone advise how I could set one of the options to be checked by default in this case below?
<div class="dropdownlistheader" ng-click="toggle('subdiv','item')">
<input type="text" readonly="readonly" class="dropdownlistinput" value="{{selectedItemValuesDisplay}}" />
</div>
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
Based on the limited details provided in the questions, I'll suggest the following:
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist" ng-init="selected[0] = true">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
The ngInit directive will select the first element in the selected flags list, by setting the first index of the array to true