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>
Related
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
I need to put two input fields with labels as below.
But In using angular, some data R fields related input not visible. Then, it should be like below.
My code
<div>
<div>
<label i18n="k" *ngIf="model" id="'k'">
<br />
<br />
K:
{{model.k}} </label>
<label i18n="N" *ngIf="model"
id="'N'">
<br />
<br />
N:
{{model.n}} </label>
</div>
<div>
<mat-form-field [formGroup]="DetailForm">
<label *ngIf="isVisible(model.r)">R</label>
<input *ngIf="isVisible(model.r)" matInput formControlName="rate"
[type]="'number'" [placeholder]="'rate'" [required]="false" [readonly]="false" [spaced]="false">
<label>Comment</label>
<input matInput formControlName="c" [type]="'text'" [placeholder]="'comment'" [required]="false"
[readonly]="false" [spaced]="false">
</mat-form-field>
</div>
</div>
But I tried a different way when two input available it shows like below.
need some expert help to resolve this.
I think you need to use 2 different mat-form-fields like this:
<mat-form-field>
<mat-label>Rate</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field>
<mat-label>Comment</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
Or have a look at this stackblitz, i put a very small demo of the above changes there:
https://stackblitz.com/edit/angular-material-starter-r7khp2
I am trying bind data from a datepicker to a variable such that it can be readily used in Typescript. Any ideas on this problem would be much appreciated
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
Select Date
MatDatePicker's contents need to be enclosed in a <mat-form-field>. See the following example from the Angular Material documentation.
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
You can use this event dateChange or dateInput on the input tag that you can use in your ts file :
<input matInput [matDatepicker]="picker"
(dateInput)="addEvent( $event)" (dateChange)="addEvent( $event)">
I am using template driven forms for validations. And I would like to Mark all fields as touched when the user blur on the last required field. currently I am only able to do this by passing the form and individually doing each field. From research I see there is a way to do MarkAllAsTocuhed but it's throwing an error. Is there a better/correct way to do this with Angular 7. I also tried looping through the controls but since it's an object that also does not work.
.HTML
<form #myForm="ngForm">
<mat-form-field class="input-field">
<input #field1="ngModel" name="name1"
[(ngModel)]="fieldOne" type="text" matInput placeholder="Field 1" required>
</mat-form-field>
<mat-form-field class="input-field">
<input #field2="ngModel" name="name2"
[(ngModel)]="fieldTwo" type="text" matInput placeholder="Field 2" required>
</mat-form-field>
<mat-form-field class="input-field">
<input #field2="ngModel" name="name3"
[(ngModel)]="fieldThree" type="text" matInput placeholder="Field 3" required>
</mat-form-field>
<mat-form-field class="input-field">
<input #field3="ngModel" name="name4"
[(ngModel)]="fieldFour" type="text" matInput placeholder="Field 4"
(blur)="touchAllFields(myForm.form)" required>
</mat-form-field>
</form>
.TS
touchAllFields(form){
//Working Version
form.controls.name1.markAsTouched();
form.controls.name2.markAsTouched();
form.controls.name3.markAsTouched();
form.controls.name4.markAsTouched();
form.controls.name5.markAsTouched();
form.controls.name6.markAsTouched();
form.controls.name7.markAsTouched();
form.controls.name8.markAsTouched();
//Failed Attempt
form.controls.markAllAsTouched(); //typeError: form.controls.markAllAsTouched is not a function
//Failed Attempt
for(var i = 0; i < form.controls.length; i++){
form.controls[i].markAllAsTouched(); //Failed since its an object and not an array
}
}
ngForm itself has no markAllAsTouched method since it's not a FormGroup or FormArray. However, NgForm has an instance of a formGroup accessible via .form or .control - source.
This has been available since Angular2 until the current latest version (Angular10)
So the correct answer to your questions should be as follows:
form.form.markAllAsTouched();
or
form.control.markAllAsTouched();
You can try this:
Found out that Object.keys can handle this.
Object.keys(this.form.controls).forEach(key => {
this.form.get(key).markAsTouched();
});
For Angular 8+, you can use:
Object.keys(this.form.controls).forEach(key => {
this.form.controls[key].markAsTouched();
});
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