Code is below. Currently the placeholder text overlaps the icon. I need the placeholder text indented to the right of the icon. Perhaps there is a better way to include an icon and placeholder text in a matInput element?
<mat-form-field>
<mat-icon fontSet="myfont"
fontIcon="my-icon-search"
class="search-icon"></mat-icon>
<input id="app_search_input"
matInput
type="search"
placeholder="{{'common.search' | translate}}"
class="search-input">
</mat-form-field>
You can use matPrefix.
<mat-form-field>
<mat-icon matPrefix>search</mat-icon>
<input matInput type="search" placeholder="search here" class="search-input">
</mat-form-field>
Both matPrefix and matSuffix are available:
https://stackblitz.com/angular/byemgpqqxdx?file=app%2Finput-prefix-suffix-example.ts
Related
I'm trying to use the Datepicker feature of Angular Material and got this error inside the "div" I created. "Error: A MatDatepicker can only be associated with a single input." After getting this error, I saw that when I select the dates, I cannot affect the following. I was only able to change the date area above.
You can see the feature I'm trying to use here:
calendar
Here is my HTML code:
<div class="col-2">
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="end_time" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
I am facing the same issue, Actually when you use Angular material date picker multiple fields in the same form, then you should use #picker name should be different.
<div class="col-2">
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
<input matInput [matDatepicker]="picker_another" [(ngModel)]="end_time" />
<mat-datepicker-toggle matSuffix [for]="picker_another"></mat-datepicker-toggle>
<mat-datepicker #picker_another></mat-datepicker>
</mat-form-field>
</div>
I'm trying to add a tooltip icon beside the mat-label of a form field.
Is there a way to do that
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<mat-icon class="help" svgIcon="faQuestionCircle" [matTooltip]="Date"></mat-icon>
<input matInput formControlName="date" [matDatepicker]="picker" (dateInput)="setDate($event.value)"
[min]="todayDate" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
If I try to add an icon inside the label then the tooltip is not getting displayed.
Date ?
I am new in Angular and I have to create an input field like that:
Everything is ok besides the Vorname placeholder on the top.
How can I put it there?
I am using Angular Materials.
<div class='grid-container-left'>
<mat-form-field appearance="outline">
<input matInput placeholder={{angeforderteVerfueger.request.vorname}} readonly>
</mat-form-field>
</div>
Thank you in advance!
Answer:
The below provided solutions works, just have to add floatLabel value with always.
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Vorname</mat-label>
<input matInput [placeholder]="angeforderteVerfueger.request.vorname" readonly>
</mat-form-field>
Try to add a label before your input:
<mat-label>Vorname</mat-label>
What you are doing is binding a property using string interpolation which is the wrong syntax. Try this
<div class='grid-container-left'>
<mat-form-field appearance="outline">
<mat-label>Vorname</mat-label>
<input matInput [placeholder]="angeforderteVerfueger.request.vorname" readonly>
</mat-form-field>
</div>
For simplicity when building a two column form I built it in two separated divs using flex box. The form however reads from left to right i.e First Name at the top of div one and Surname at the top of div two. If the user uses the tab key to move between inputs the tab key moves down the form rather than across. This was an oversight by me but I was wondering if the tabbing between inputs could be set different from the default. Maybe a picture would help.
So I would like to change it to tab across. How would I do that? Also the actual form is more complicated than shown below so I don't want to rebuild the html.
My HTML
<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="space-between center">
<div fxFlex="40">
<mat-form-field class="formFieldLeft">
<div class="is-size-7 has-text-grey-light mbxs">First Name</div>
<input matInput formControlName="firstName">
</mat-form-field>
<mat-form-field class="formFieldLeft">
<div class="is-size-7 has-text-grey-light mbxs">Email Address</div>
<input matInput formControlName="email">
</mat-form-field>
<mat-form-field class="formFieldLeft mblg">
<div class="is-size-7 has-text-grey-light mbxs">Company Phone Number</div>
<input matInput formControlName="companyPhoneNumber">
</mat-form-field>
<div fxFlex="60">
<mat-form-field class="formFieldRight">
<div class="is-size-7 has-text-grey-light mbxs">Surname</div>
<input matInput formControlName="lastName">
</mat-form-field>
<mat-form-field class="formFieldRight">
<div class="is-size-7 has-text-grey-light mbxs">Job Title</div>
<input matInput formControlName="jobTitle">
</mat-form-field>
<mat-form-field class="formFieldRight mblg">
<div class="is-size-7 has-text-grey-light mbxs">Mobile Number</div>
<input matInput formControlName="mobilePhoneNumber">
</mat-form-field>
</div>
Add tabIndex like
<input tabindex="3">
<input tabindex="0">
<input tabindex="-1">
<input>
<input tabindex="2">
<input tabindex="1">
see this for more details
You can save active tab index and create separate function on
(keyup)="onKeypressEvent($event)" {
// check does it `tab`
}
chech the key code and depending of where you current tab active change next active tab
The problem is that when i search a list of users by typing characters into the input field and mat-autocomplete finds the searched user, after i click on it to select that user the input field becomes empty instead of showing the selected user.
Here is my HTML code:
<div class="material-input">
<mat-form-field class="form-group">
<input id="userNameInput" matInput placeholder="Search user name" formControlName="userName" for="search-box"
#searchBox id="search-box" (input)="search(searchBox.value)" [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<mat-option *ngFor="let username of mockLdap | async" [value]="username">
{{username.userName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
You have to set the [value]="username.userName" of your option accordingly.
<div class="material-input">
<mat-form-field class="form-group">
<input id="userNameInput" matInput placeholder="Search user name" formControlName="userName" for="search-box"
#searchBox id="search-box" (input)="search(searchBox.value)" [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<mat-option *ngFor="let username of mockLdap | async" [value]="username.userName"> <!--- Here you have to set username.UserName -->
{{username.userName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>