I'm trying to disable an Angular Material Autocomplete component. I would have expected to just be able to set disabled on the input, but that does nothing. (I also tried setting disabled on mat-form-field and mat-autocomplete.) Setting matAutocompleteDisabled on input prevented the options from showing, but still allowed typing in the field. Setting readonly on input prevented typing, but it doesn't change the UI, so seems like that will be confusing for the user. Is this a bug, or am I missing something?
Here's the closest I've come so far, using readonly (and disabled isn't working as expected)
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text"
disabled readonly
placeholder="Pick one"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
You should use formControl to set it, something like:
this.formGroupName.controls['myControl'].disable()
Use [attr.disabled]="true". It will set the disabled to true.
You can do css trick for this purpose.
Apply some class to parent tag of input. In you case upper tag is <mat-form-field class="example-full-width"> so i add disable-block class in this. And applied below css.
.disable-block {
pointer-events: none;
opacity: .7;
}
Full code here.
HTML
<form class="example-form">
<mat-form-field class="example-full-width disable-block">
<input type="text" disabled readonly placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
CSS
.disable-block {
pointer-events: none;
opacity: .7;
}
If you want more lighter text field then you can decrease opacity to .6 or .5 or more want you want.
Hope this will solve you problem.
Related
I am running into an issue when testing for accessibility problems on an Angular 8 Material app. I am using the Chrome Plugin WAVE Evaluation Tool to check for accessibility https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh.
The problem looks to be only with a Mat Select list.
-- Error
image of Mat list with Orphaned Form Lable
WAVE tool Errors
-- Code ( this is what I started with )
<mat-form-field>
<mat-select>
<mat-option *ngFor="let tag of tags" [value]="tags.value">
{{ tag.viewValue }}
</mat-option>
</mat-select>
<mat-label>Resource Tag</mat-label>
</mat-form-field>
-- Code (then after reading that it was missing the form label I changed it to this)
<mat-form-field>
<mat-select id="tags">
<mat-option *ngFor="let tag of tags" [value]="tags.value">
{{ tag.viewValue }}
</mat-option>
</mat-select>
<mat-label for="tags">Resource Tag</mat-label>
</mat-form-field>
Even after that change, the Orphaned Form Lable is still there.
I also removed all Material elements and just created a default select list using HTML elements that worked and did NOT have a missing form label. From this my guess its something going on in the Material elements.
I would like to create a mat-select controls in mat-menu. In the documentation I don't see any examples with that scenario. I tried it out, and it seems to be working, the problem is when options are expanded, the menu disposes. How can I keep it open? Here is the tester I am working with
You need to stop event propagation ($event.stopPropagation()) on the menu item. Here's an example of how this can be done;
<div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()">
<mat-form-field>
<mat-label>Some label</mat-label>
<mat-select [formControl]="someFormControl">
<mat-option *ngFor="let item of someList" [value]="item.value">{{item.description}}</mat-option>
</mat-select>
<button type="button" mat-button matSuffix mat-icon-button (click)="someFormControl.setValue(null); $event.stopPropagation();" title="Clear">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
Also you probably want to disable ripple ([disableRipple]="true") so you do not get the ripple visual feedback that menu items normally have.
I have a mat-form-field that contains a chip list and another one that contains any other kind of input. I want to be able to navigate away from the chip list into the input field and into the following mat-form-fields but it seems like this behaviour is not supported. Does anyone have a work around for this to be able to navigate this components with tab?
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
<mat-form-field>
<input placeholder="Another unrelated field" matInput>
</mat-form-field>
example: https://stackblitz.com/edit/angular-ixswwc?file=app/chips-input-example.html
The infinite loop of focus happens because the <input> is inside of the <mat-chip-list>
It could be solved by doing the following
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-form-field>
<mat-form-field>
<input placeholder="Another unrelated field" matInput>
</mat-form-field>
In below code, my country select options are fired so many times that browser stopped responding.
<div [formGroup]="countryForm">
<mat-form-field>
<mat-select formControlName="selectedCountry" class="my-item-text" placeholder="Country">
<mat-option (onSelectionChange)="onCountrySelectionChanged($event)" *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
and my component code as below
onCountrySelectionChanged(changeEvent) {
if (changeEvent && changeEvent.isUserInput && this.selectedCountry != changeEvent.source.value) {
this.countrySelected.emit( changeEvent.source.value);
}
}
I tried to restrict by checking if its user change event [isUserInput] and also checking if the value really changed! Now am able to reduce the fire-events and the application works normal.
Is there a better way to use select-option as am now including above logic everywhere am using mat-select component.
The mat-select has an Output property you can bind to called selectionChange, which should fire whenever the option is changed by the user. Try switching up your code to this:
<div [formGroup]="countryForm">
<mat-form-field>
<mat-select (selectionChange)="onCountrySelectionChanged($event)" formControlName="selectedCountry" class="my-item-text" placeholder="Country">
<mat-option *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Thinking about it - what's probably happened is that you've put your onSelectionChange binding on every single mat-option, so when you change the option, you're likely firing that once for each option in your select. Moving it out to the mat-select means it will only fire once.
In Angular Material, the default design of input directives is for the content within <label> to be displayed in the input element until the user enters some input, at which point it will float above the input element, as seen in all examples here.
Is there any way to force the labels to float above the input box at all times instead, even when no data has been entered?
I think the css class md-input-has-placeholder is what you need:
<md-input-container class="md-input-has-placeholder">
<label>Name</label>
<input type="text"/>
</md-input-container>
Plunker example here
Hope it helps.
The is an official feature for that: floatLabel="always"
The floatLabel property of can be used to change this default floating behavior. It can set to never to hide the label instead of float it when text is present in the form field control. It can be set to always to float the label even when no text is present in the form field control. It can also be set to auto to restore the default behavior.
<mat-form-field floatLabel="always">
<mat-label>Both a label and a placeholder</mat-label>
<input matInput [(ngModel)]="model.value">
</mat-form-field>
source, see the official form-field documentation
With Md-select this worked for me:
<md-input-container style="width: 200px;" md-input-has-placeholder>
<placeholder>Snack Types </placeholder>
<md-select ng-model="selectedOption">
<md-option ng-repeat="item in snacks" >
{{item.name}}
</md-option>
</md-select>
</md-input-container>
For the md-select element, occupy the following:
<md-input-container class="md-input-has-placeholder">
<label md-no-float="true" class="md-required">Snack Types</label>
<md-select ng-model="$ctrl.selection" ng-required="true" md-no-asterisk>
<md-option ng-value="option.id" ng-repeat="option in $ctrl.selection">{{ opcion.value}}</md-option>
</md-select>
</md-input-container>
I used the following CSS to change the label when data is being entered and highlight the other fields:
md-input-container:focus-within > label[class~="md-required"]{
transform: scale(1);
font-weight: bold;
}
And the following CSS so that the asterisk is always in color (you can put the color you want):
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after{
color: rgb(255,87,10);
}