So I have an input field that only accepts numbers, but it still suggests strings I have tried to search for previously.
Been searching how I can make it only suggest numbers but have come up empty.
The html code looks like this:
<mat-form-field floatLabel="never" [formGroup]="quickSearchForm" (keyup.enter)="quickSearch()">
<input #quickInput
type="number"
#tooltip="matTooltip"
class="filter-input"
(focusin)="tooltip.show()"
matTooltip="{{ 'order.list.buttons.quick-find-expectations' | translate:locale.language }}.."
matTooltipPosition="above"
matInput
formControlName="quickSearchId"
placeholder="{{ 'order.list.buttons.quick-find' | translate:locale.language }}.." />
</mat-form-field>
Can you edit your main post and add the html code for this input ?
I think that the input is not with type number.
Doc reference : https://www.w3schools.com/tags/att_input_type_number.asp
I have been asked to do this project using Angular in work and honestly not touched Angular 2 before. I can do this no issue using jQuery but I am having trouble getting it to work in Angular. Basically, in this modal I have a form, and it is just a template in which you can choose what information you want to include within an email. I have a mat-select dropdown and depending on what has been selected, I want to then append that to the text area below on click of the check icon.
Example: "Hello {{Client Name}}, we are happy to be working with {{Company Name}}".
The values inside the '{{ }}' are the options selected in the mat-select above.
I will include my code below but unfortunately it isn't a lot to go off due to not being too sure where to start.
Component.html
<div fxFlex>
<mat-form-field fxFlex="90" appearance="outline">
<mat-label>Placeholder</mat-label>
<mat-select id="placeholderValue" matInput required>
<mat-option value="name">Client Full Name</mat-option>
<mat-option value="phone">Client Phone Number</mat-option>
<mat-option value="email">Client Email Address</mat-option>
<mat-option value="companyName">Company Name</mat-option>
</mat-select>
</mat-form-field>
<mat-icon fxFlex="10" fxLayoutAlign="center center" (click)="addPlaceholder()">check</mat-icon>
</div>
<mat-form-field appearance="outline" class="textarea">
<mat-label>Message</mat-label>
<textarea id="placeholderText" matInput formControlName="Description"></textarea>
</mat-form-field>
Component.ts
addPlaceholder(){
}
I apologise for the lack of code, I have been working on this regarding the UI and then this for the past few days, have been looking around for a way to do it and tried to convert my way in jQuery over to Angular and am assuming I could use some form on (change) function?
Here is an image of how it needs to look (multiple selects can be chosen so it also cannot replace the current select in the textarea).
I would appreciate any advice or help given. Thank you in advance.
I suggest you to lookup at angular two-way binding property.(https://angular.io/guide/two-way-binding).
To change dinamically the value of the select you can use [(ngModel)] used like this:
<mat-select id="placeholderValue" [(ngModel)]="variableName" matInput required>
<mat-option value="name">Client Full Name</mat-option>
...
</mat-select>
The variable will be updated automatically every time you change the selected value on the select field.
Another way to implement this could be to use (selectionChange) event on the mat-select field and link a function that will be executed after every change on the select value.
public myFunction(event: any) {
this.myVariable = event.value;
// other code that you need
}
<mat-select id="placeholderValue" (selectionChange)="myFunction($event)" matInput required>
<mat-option value="name">Client Full Name</mat-option>
...
</mat-select>
To output your variable in the html template you could use string interpolaion (https://angular.io/guide/interpolation).
To dinamically change the html structure you could use the *ngIf directive (https://angular.io/api/common/NgIf).
I have a form, with some simple input fields. In some of them the 1Password Extension gets triggered and the popup shows up.
And in some cases the popup does not get triggered.
I can't find any reason why it would trigger on these specific input fields.
HTML of Input where 1Password gets triggered.
<div class="col">
<mat-form-field appearance="fill" class="form-mat-field mt-1 mx-auto">
<mat-label class="form-control-label"
jhiTranslate="bringCockpitApp.sponsoredProduct.fadeoutIconId">
Fadeout Icon Key
</mat-label>
<input formControlName="fadeoutIconId" matInput name="fadeoutIconId"
placeholder="Bier"
</mat-form-field>
</div>
Any idea, why this is happening? and how to disable it?
put data-1p-ignore as an attribute in your field to get 1Password to ignore the field.
<input type="text" id="username" name="ig" data-1p-ignore>
Source: https://developer.1password.com/docs/web/compatible-website-design
my Solution which seemed to work, was to set the input type to "URL".
honestly I don't know why that worked, Tel worked too but that won't help a mobile user.
the Search option also removed the icon but left an X button. the 'URL' type removed both.
Hope this helps.
I'm new to angular5 and spring and I need help with angular communication with database.
I need to make user registration, and for it I used auth0 (it's basic registration with just email and password), now I need to collect more data about user (email, name, city, phone, etc) and write it into database.
I want to use the email used for registration (i don't want to make user have to repeat it) and just pass it to the database. I can get the email used in auth0 (in my code i place it in this.userEmail, for examples below), but I dont't know how to pass it further through html part.
This is the example how I made input for user's name and it works fine. I tried to make similar for email, but it won't work and I don't get why nor how I should actually do it... help please
<label>Name:</label>
<mat-form-field>
<input matInput type="text" placeholder="Name"
[(ngModel)]="user.firstName" name="firstName" #name>
</mat-form-field>
and this sad try:
<label>E-mail address:</label>
<mat-form-field>
<input matInput type="text" placeholder=""
[(ngModel)]="user.email" value="{{this.userEmail}}" name="email"
disabled #name>
</mat-form-field>
also, i know this above is totally worng, ngModel and value of input field put like this won't work, but i wanted to (maybe) describe better what I wanted to achieve :)
and i know i could use rules in auth0 for collecting more data about user, but for certain school's conditions we are restricted to this way :/
component.html
<mat-form-field>
<input matInput [ngModel]="user.email" name="email" disabled>
</mat-form-field>
component.ts
ngOnInit() {
this.user.email = this.userEmail;
}
I would also consider not showing the email input at all. After all, if the user has already given you the email, why confuse them with this disabled input?
I am using Angular (4) + Angular Material and Reactive Forms for my Form Field. How can I disable that? I tried to google for things like disabled="true" or something like that. May can you show me the right syntax? That must be easy. Thanks!
my example:
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx"></textarea>
</mat-form-field>
With reactive forms [disabled] will not work.
You need to set the disabled status on the formControl instead:
this.myForm = this.formBuilder.group({
xxx: [{value: 'someValue', disabled:true}]
})
Also remember when doing this, this field will not be included in the form object e.g when submitting. If you want to inspect all values, disabled included, use:
this.myForm.getRawValue();
Since you are using ReactiveForms (formControl) you should use
this.formGroupName.disable() to disable all the group form or
this.formGroupName.controls[controlNmae].disable() for a specific formControl.
PS: if you would like to enable the control again, you could use:
this.formGroupName.controls[controlNmae].enable()
Both #dmarquina and #AJT82 provided working answers.
(Although i like dmarquinas answer better)
You can also try:
<mat-form-field appearance="outline">
<mat-label>Some Label</mat-label>
<input type="text" matInput formControlName="disabledFiled" readonly>
</mat-form-field>
Notice the: readonly notation.
Update:
Be aware that this can be a security issue. As Jnr posted in the comments:
Right-click, view source, remove readonly, and you got yourself an editable field again.
(thanks for the valuable input Jnr!)
You can use disabled property as hardcoded property to your textarea element
<textarea disabled></textarea>
Or you can bind it to a method in your component class to disable it dynamically based on some condition.
[disabled]="getDisabledValue()"
In your .ts file
getDisabledValue() {
//your condition, in this case textarea will be disbaled.
return true;
}
Complementing answer of the #poderoso_mike, readonly can be used as [readonly]="true | false".
It's have worked to me using Angular Material 9.
<ng-container *ngFor="let filter of filterSet">
<mat-form-field appearance="outline" class="w-11/12">
<mat-label>{{ filter.name }}</mat-label>
<input
matInput [readonly]="filter.enteredValue!==''"
[formControlName]="filter.key"
/>
</mat-form-field>
</ng-container>
[readonly] attribute will help in disabling the form-field.
If you just want it disabled use:
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx" disabled></textarea>
</mat-form-field>
else use:
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx" [disabled]="true"></textarea>
</mat-form-field>
In place of the "true" in the second example you can use any other expression/variable value that evaluates to a boolean...
However this way may only work in template driven forms and not in reactive forms?? idk, since I never use reactive forms, but from the looks of the top answer, that seems to be the case I guess...
The easiest way I know to disable a textarea field is to just add the "disabled" attribute into it. like so <textarea disabled></textarea>.
I ran into an issue where I am disabling all of my reactive form fields when I initialize my form like this:
if (!isEditMode) {this.editForm.disable();}.
Every input was disabled except for the textarea input. I got around this issue by performing the above code example after I have fetched the data and have patched the form.
I'm trying my possible answer to the above question
this.formGroupName.controls.controlName.disable();
formControlName: [{value: 'someValue', disabled:true}]
This will work but make sure if you have that field is in read-mode, then while submitting form it will exclude the control with disabled flag. So you won't get value which you patched to that form field.
For me, only setting [disabled]="isThereAServiceError" did not help. I'm currently on Angular 13 with Angular Material 13. This did help me:
<textarea
[attr.disabled]="isThereAServiceError"
[readonly]="isThereAServiceError"
matInput
...
HTML part
<mat-form-field appearance="outline">
<mat-label>Input</mat-label>
<input matInput placeholder="anything
[formControl]="selectedInput" />
</mat-form-field>
Code behind
function(){
this.selectedInput.disable();
}