I am relatively new to Angular and I couldn't find any solution to the following problem.
I have the following code:
<mat-form-field>
<input matInput placeholder="ZIP" style="color:red;">
</mat-form-field>
I want it to write the word ZIP in red, but all it does is showing a red cursor, and the word zip is still grayed out.
This works perfectly when working with input, and not with matInput.
Does anybody know how can it be solved?
Thanks!
Try this way :
<mat-form-field class="example-full-width">
<mat-label style="color: red">Zip</mat-label>
<input matInput>
</mat-form-field>
Live example :
https://stackblitz.com/edit/angular-rkewwm?file=app/input-overview-example.html
(Don't forget to upgrade your package #angular/material, v5 min if I'm not mistaken)
Related
I am having problems with input of type password which is blocking user's to press the backspace key and so he can't erase caracters. Strange thing, it is also blocking the email input above.
However, when I change the type of the password input to text, everything is working fine.
I am using :
Angular 8.2.14
Angular Material 8.2.3
Safari 13.1
The npx browserslist command output safari 13,safari 12.1 for the projet.
Here's what the code is looking like :
<mat-card *ngIf="!loading">
<mat-card-title>
{{"LOGIN" | translate}}
</mat-card-title>
<mat-card-content>
<form (ngSubmit)="valid()">
<mat-form-field>
<input matInput [placeholder]="'EMAIL_ADDRESS' | translate" [(ngModel)]="email" name="email"/>
</mat-form-field>
<mat-form-field>
<input type="text" matInput [placeholder]="'PASSWORD' | translate" [(ngModel)]="password" name="password"/>
</mat-form-field>
<div>
<mat-checkbox [(ngModel)]="rememberMe" name="rememberMe">{{'REMEMBER_ME' | translate}}</mat-checkbox>
</div>
<div>
<a [routerLink]="'/forget'">{{ 'PASSWORD_FORGET' | translate }}</a>
</div>
<button class="margined" mat-raised-button color="primary"> {{"SUBMIT" | translate}}</button>
</form>
</mat-card-content>
</mat-card>
I've tried to remove all the content related to the Angular Material library, it doesn't seem to solve the problem.
The answer was to delete this tiny line of css
input { -webkit-user-select: all!important; }
Everything is working fine now. Sorry for the inconvenience, it was my fault.
I'm facing really annyoing issue for quite a long time.
I've upgrade my angular from version 6 to the newest one (currently 9.1.3, material 9.2.1).
The problem is:
the label and/or placeholder is not floating. It happens only when I open the application in browser for the first time after ng serve. The bug dissapears when i refresh browser tab.
not floating placeholder bug
the code look like this:
<div class="field__wrapper">
<p>Location</p>
<mat-form-field class="form__field">
<input
matInput
type="text"
placeholder="E.g. Santorini, Greece"
formControlName="location"
maxlength="60">
<mat-error *ngIf="newEventForm.controls['location'].touched && !newEventForm.controls['location'].dirty">
Location is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
I have a problem with selecting an option in mat-select with the use of google chrome extensions. Extensions can fulfill inputs but mat-selects remains untouched.
I've tried to use extensions like: Autofill, Form-O-Filler. By default extensions can't reach mat-selects. To obtain my goal I used javascript code to select option/value but it didnt work.
My summarized mat-select looks like this:
<mat-form-field appearance="outline" class="name">
<mat-select formControlName="name"
[mctPristine]="group?.name"
name="name"
id="name">
<mat-option *ngFor="let name of names" [value]="name">
name
</mat-option>
</mat-select>
</mat-form-field>
I have used code below to choose value:
document.getElementById('name').value='Patryk';
and this:
document.getElementById('name').selectedIndex='0';
Unfortunately this does not work at all. Should i change my javascript code? Or chrome extension?
Pretty straight-forward question. When I click on an input field I want to select-all the text so when I start typing it over-writes what was previously there. Anyone know how to do this?
Seems the following should work:
<input matInput (click)="$event.target.select()">
Example
What worked best for me is onfocus="this.select()"
<input matInput onfocus="this.select()">
If you are using angular material 1.x, you can use md-select-on-focus
<md-input-container>
<label>Auto Select</label>
<input type="text" md-select-on-focus>
</md-input-container>
This link can help you md-select-on-focus
When I copy the DatePicker example from the Angular Material website it's adding an extra horizontal line to the bottom of it and I can't figure out why.
Here's the example:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
And here's a screenshot:
this problem is because you are using the angular material and also the cdn of materialize or materialize style.
you could delete this line:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
and the line of the datepicker will be ok, and then, you could use other grid system for de rows and cols.
for example: https://github.com/angular/flex-layout
I am just leaving this here in case someone else makes the same mistake I did. In my case I accidentally copy and pasted the date picker code inside an existing mat-form-field. I didn't notice it at first because of all the markup.
I had it like this and removing the outer mat-form-field fixed it for me:
<mat-form-field>
<mat-form-field>
<mat-label>End Date</mat-label>
<input matInput [(ngModel)]="endDate" #endDate="ngModel" [matDatepicker]="picker1">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</mat-form-field>