Hi every i want to disable the input field after selected the value in drop down, and i want to reset the selected value using of reset button.
For reference Stackblitz : https://stackblitz.com/edit/mat-autocomplete-1uelcd?file=app%2Fautocomplete-display-example.html
For example:- If we selected any value in the input field then filed should be disabled after clicks the reset button it should enabled to select the value please check and help us.
Html:
<div class="example-form">
<form>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto2">
<mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<button mat-raised-button (click)="onResetSelection()" color="primary">Reset Selection</button>
</form>
</div>
Reset:
onResetSelection() {
this.filteredOptions = [];
}
Disable:
[disabled]="filteredOptions =='option'"
You can do that with below approach
Add on select event to disable form control and while doing reset event just clear the form control.
In View :
<mat-autocomplete #auto2="matAutocomplete" (optionSelected)="onSelectionChanged($event)" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
In Template :
...
onSelectionChanged(event: any) {
this.formGroupName.controls['myControl'].disable();
}
onResetSelection() {
// you can enable the control with below line
this.formGroupName.controls['myControl'].enable();
this.formGroupName.controls['myControl'].setValue('');
}
...
Happy Coding.. :)
Related
I am trying to prevent the mat-chip module from automatically adding a row after one chip has been selected. The max chip count is 1, so I disable the input after the user selects an item from the dropdown. But, it still adds a row beneath it as if they can type more. How can I prevent that?
<mat-chip-list #chipList aria-label="Fruit selection" >
<mat-chip
*ngFor="let item of selected; let i = index"
[selectable]="!disabled"
[removable]="!disabled"
(removed)="remove(i)">
{{item[filterProperty]}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
[maxLength]="maxLength"
[value]="optionBaseValue"
[placeholder]="label" #chipsInput
[disabled]="(selected.length === maxCount) || inEditMode === false"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(focus)="autoInputValue($event)"
(focusout)="resetAutoInputValue($event)"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="itemSelected($event)" (onBlur)="itemSelected($event)">
<mat-option *ngFor="let item of filteredItems | async " [value]="item">
<div > {{item[filterProperty]}}</div>
</mat-option>
</mat-autocomplete>
Thank you!!
You could use something like:
<input [hidden]="selected.length === 1"
Note that you can change the conditional however you like.
I'm finding away to add mat select on my input field but some reason when I click on the arrow, it's not working and not showing me all the list.
I have autocomplete and usually when a user start typing it show all the list to select but I'm trying add mat-select also so that user can just click on the arrow and select from the list without having to type something first.
I've followed below stackblitz example ( checkbox is not needed for mine) but mine is little bit different and I also have text input and auto complete so I'm not sure why I can't type anymore in my input with current code and also the drop down list are not showing when I click the arrow.
any suggestion or help will be really apprecaited.
https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect-multiple-example.html
<mat-form-field class="form" appearance="fill">
<mat-label>Search or Select a Super Tag</mat-label>
<mat-select [formControl]="superTags" multiple>
<mat-select-trigger>
<mat-chip-list #chipList>
<div>
<mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
(removed)="remove(superTag)">
<img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">
{{superTag.tag}}
<mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>
</mat-chip>
</div>
<div>
<input matInput #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">
</div>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngIf="isLoading" class="is-Loading">
<mat-spinner diameter="20"></mat-spinner>
</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
{{tag}}
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-select-trigger>
</mat-select>
</mat-form-field>
In this case I would not use the combination of chip list and autocomplete.
I think, what you really need, is the autocomplete with options which contain checkboxes for the multiselect. Try to do, somethihg like this.
<mat-form-field class="example-full-width">
<input type="text" placeholder="Select Users" aria-label="Select Users" matInput [matAutocomplete]="auto" [formControl]="userControl">
<mat-hint>Enter text to find users by name</mat-hint>
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let user of filteredUsers | async" [value]="selectedUsers">
<div (click)="optionClicked($event, user)">
<mat-checkbox [checked]="user.selected" (change)="toggleSelection(user)" (click)="$event.stopPropagation()">
{{ user.firstname }} {{ user.lastname }}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>
Full example:
https://stackblitz.com/edit/angular-sx79hu?embed=1&file=app/multiselect-autocomplete-example.html
I am using material and form in a component in angular 6.
<mat-form-field>
<input matInput [matAutocomplete]="auto" [formControl]="autoForm"
formControlName="formg">
<mat-autocomplete #auto="matAutocomplete" panelWidth="200">
<mat-option *ngFor="let val of list | async" [value]="val.code"
(onSelectionChange)="changed($event)">
<span>{{val.code}} - {{val.name}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Now the value shown on textbox is the code number only. I would like to display it as "val.code-val.name" . Shall we do it from html itself? without changing the form values? thanks in advance
Here is my markup:
<mat-form-field class="col-md-3" *ngIf="isShown">
<mat-select placeholder="Status" formControlName="batchStatus" [value]="selected">
<mat-option *ngFor="let Status of statusList"[value]="status.referenceDetailCode">
{{ status.referenceDetailValue }}
</mat-option>
</mat-select>
</mat-form-field>
ts code :
this.isShown = true;
this.selected = res.status;
With the above code, dropdown is not getting selected with the status that I'm setting in my typescript file.
It worked by doing this :
this.displayForm.controls.status.setValue(this.selected);
I have a bunch of mat-selects like this:
<mat-form-field>
<mat-label>KPI</mat-label>
<mat-select>
<mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Modifier</mat-label>
<mat-select>
<mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
</mat-select>
</mat-form-field>
Now, I want to send the selected values with a (click) event of a button:
<button mat-button (click)="addComponent(data)">Add Component</button>
How do I get both values of the dropdowns to the event handler function? Thanks!
you can simply add ngModel to the Select dropdowns.
<mat-form-field>
<mat-label>KPI</mat-label>
<mat-select [(ngModel)]="kpiValue">
<mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Modifier</mat-label>
<mat-select [(ngModel)]="modifierValue">
<mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
</mat-select>
</mat-form-field>
In your button function change to something like below
<button mat-button (click)="addComponent(kpiValue,modifierValue)">Add Component</button>
Try binding values of both drop-down to one object and then pass the same object to the event.