I am trying to use the select component from angular material but it appears incorrectly:
I have copied and pasted the code from the angular material site:
<mat-form-field appearance="fill">
<mat-label>Has backdrop</mat-label>
<mat-select #hasBackdrop>
<mat-option>Unset</mat-option>
<mat-option [value]="true">True</mat-option>
<mat-option [value]="false">False</mat-option>
</mat-select>
</mat-form-field>
NgModule({
imports: [
CommonModule,
RoutesRoutingModule,
FormsModule,
SharedModule,
MatTabsModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule,
MatInputModule,
MatFormFieldModule,
],
})
I havent added any other css rules.
If anyone can help i would appreciate it!
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 am facing issue in rendering mat date picker. however it works fine when i reload the page. It only happens when i navigate from one tab to another.
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" id="date" required [(ngModel)]="d.date" name="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker ></mat-datepicker>
</mat-form-field><br />
Thanks in Advance!
I had this issue myself. In my case, I had a component with ViewEncapsulation.None loaded beforehand with css that broke the datepicker.
I am trying to add File type input in angular material form but I am getting error as mat-form-field must contain a MatFormFieldControl.
I tried adding matInput in the input tag then too I am getting error as mat-form-field must contain a MatFormFieldControl what are ways to add file upload type input inside the angular material form?
<mat-sidenav-container>
<mat-sidenav-content>
<form>
<mat-form-field appearance="outline">
<mat-label>Media Title</mat-label>
<input matInput placeholder="Enter your name">
</mat-form-field>
<mat-form-field>
<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected()" #fileInput type="file" id="file">
</mat-form-field>
</form>
</mat-sidenav-content>
</mat-sidenav-container>
app.module.ts
import { AngularMaterialModule } from './material.module';
import { MatInputModule, MatFormFieldModule } from '#angular/material';
imports: [
BrowserModule,
BrowserAnimationsModule,
AngularMaterialModule,
MatInputModule,
MatFormFieldModule
],
File Upload input should be added inside the form.
Output:
Angular Material supports only a handful of input types and file type is not one of them. You can check more at:
https://material.angular.io/components/input/overview#supported-code-lt-input-gt-code-types
You need to add file type outside of <mat-form-field>
I'm trying to use Angular Material in my project and the tags are imported, but not all of the styling is there.
In my HTML:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
It should show:
But it shows:
I added #import "~#angular/material/prebuilt-themes/indigo-pink.css"; to styles.css and the calendar is showing fine, but the text field still looks bad.
You need to follow everything here. https://material.angular.io/guide/getting-started
Try adding this line to your styles.css: #import "~#angular/material/prebuilt-themes/indigo-pink.css";
As from this step: https://material.angular.io/guide/getting-started#step-4-include-a-theme
These are the imports you will need:
import { MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule } from '#angular/material';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})
I want to create a theme for my angular 4 app using angular material 2.I created the initial part but it doesn't work. What have I done wrong in this code?
--Theme.scss
#import "~#angular/material/_theming";
#include mat-core();
$app-primary: mat-palette($mat-blue, 600);
$app-accent: mat-palette($mat-green, 600);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn );
#include angular-material-theme($app-theme);
-- Component
<button color="primary" class="mat-raised-button">Pick Up</button>
<button color="accent" class="mat-raised-button">Drop Off</button>
-- angular-cli.json
"styles": [
"styles.css",
"theme.scss"
]
It's a simple fix. Like I said in the comment on your question, just remove the underscore. Easy.
You should also use the mat-raised-button attribute instead of the class (if you're using 2.0.0-beta.11 and above).
<button color="primary" mat-raised-button>Pick Up</button>
<button color="accent" mat-raised-button>Drop Off</button>
If you're using 2.0.0-beta.10 or below, use the md-raised-button attribute.
<button color="primary" md-raised-button>Pick Up</button>
<button color="accent" md-raised-button>Drop Off</button>