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();
}
Related
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 have a problem with the Forms Module of Angular Material!
I try to create a tag with many Angular Material Basic Inputs.
But on the website, only one Input field appears. The other input fields only show the value of the field. Now, when i click on the first input field, then the other fields appear correctly, but only when i click on the first input field?
Before i clicked on the first input field
And after
<form class="example-form" style="margin-top: 15px">
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" disabled>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" disabled>
</mat-form-field>
</form>
It seems that in your case, there might be some render errors. I suspect this as you have a disabled button in the template, but on your screenshots they do not appear to be so.
Check you Browser console. (F12 o CTRL+SHIFT+i) If you refresh your app, can you see any errors? Those can make the app work in undeterministic ways. In the command line, where your run ng serve do you see any errors maybe? Fix these first, and try again.
My Input looks like that :
<mat-form-field>
<input
matInput
placeholder="A blablabla"
required
(focus)="focusIn($event)"
(focusout)="focusOut($event)"
[(ngModel)]="A.txt1"
(ngModelChange)="onChange()"
(keypress)="numberOnlyMin($event)">
</mat-form-field>
My methods are :
focusIn(event: FocusEvent) {
console.log(event.detail);
}
focusOut(event: FocusEvent) {
console.log(event.detail);
}
Basically I want to retrieve the value of my input right after I finish writing, that is why I use focusOut.
However I retrieve 0 all the time, is there any reason why ?
And how to pass data between those 2 focus?
Thanks !
Judging from the post, I believe your main intent is to actually know when the user has finished changing something in the input field and then use the value.
You could use the (change) event in order to know when something has changed in the field.
This will fire only once you've focused out of the input and there's a change in the input value. So you don't really have to listen to all those other events.
If you still want to be notified even if there's no change in the value of the input, using the (blur) event would be ideal.
Here's a Working Sample StackBlitz for your ref.
You are looking for the blur-method.
Usage in Component:
onBlur($event) {
console.log($event.target.value);
}
Usage in Markup
<input type="text" (blur)="onBlur($event)" >