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 an input field where I need to set validations. I have used 2 patterns for the same:
^[1-9][0-9]*$
^\s|\s$
How do I combine these into one or is there a way to use them together?
This is a custom password validation.
<mat-form-field>
<input type="password" name="password" ngModel matInput placeholder="Password" #passwordInput="ngModel" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&].{8,}$" required>
<mat-error *ngIf="passwordInput.invalid">Should contain; 8 characters,
a number, a special character , a lower letter and a upper letter.</mat-error>
</mat-form-field>
You can combine regular expressions with the | operator. Like this:
/(^[1-9][0-9]*$)|(^\s|\s$)/
For more info about the RegExp operators check the docs.
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.
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();
}