Hey people I'm facing an issue where Angular material button's color does bot apply in some cases, just like this one:
html:
<mat-card>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<form [formGroup]="form" (submit)="onLogin()" *ngIf="!isLoading">
<mat-form-field>
<input matInput type="email" formControlName="email" placeholder="Email">
<mat-error *ngIf="form.get('email').invalid">Please enter a valid email.</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" formControlName="password" placeholder="Password">
<mat-error *ngIf="form.get('password').invalid">Please enter a valid password.</mat-error>
</mat-form-field>
<mat-action-row>
<!-- NOT COLORED-->
<button mat-raised-button type="submit" color="warn">Login</button>
</mat-action-row>
</form>
<!-- COLORED-->
<button mat-raised-button type="submit" color="warn">Login</button>
</mat-card>
result:
As you can see, both buttons has same code, but for one the color is applied and for the other one it doesnt, and I want to use that color inside my form... any solutions?
I had a similar problem with the mat-select and mat-options components. I know this post is dated, but this is still a common problem. Sometimes when you add a style to a material component it just doesn't work.
For me, I managed to get it to work by moving my material related styles to the global stylesheet. This seems to work consistently.
problem solved by adding :
this.form = this.fb.group({
email: ['', [Validators.required]],
password: ['', [Validators.required]]
});
in the compponent.ts file
Related
I'm new to angular and i have a project that already has a login with a username and password input. The password input has a button to show the password. The problem is, that when im in the password input field and i press enter, it toggles the button to show the password instead of submitting the form. How can i change that?
component.html
<div style="text-align: center" class="centered">
<form [formGroup]="form">
<br>
<mat-form-field appearance="fill">
<mat-label>Username</mat-label>
<input name="username" formControlName="username" matInput>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input name="password" formControlName="password" matInput [type]="passwordVisible ? 'text' : 'password'">
<button mat-icon-button matSuffix (click)="passwordVisible = !passwordVisible" [attr.aria-label]="'Hide password'"
[attr.aria-pressed]="!passwordVisible">
<mat-icon>{{passwordVisible ? 'visibility' : 'visibility_off'}}</mat-icon>
</button>
</mat-form-field>
<br>
<button (click)="login()" mat-raised-button>Login</button>
<button (click)="navigateToRegister()" mat-raised-button color="primary" style="margin-left: 10px">Register</button>
</form>
</div>
Default type for the button is submit that might be causing this issue try changing your show/hide button type to button something like
<button type="button" mat-icon-button matSuffix (click)="passwordVisible = !passwordVisible" [attr.aria-label]="'Hide password'"
[attr.aria-pressed]="!passwordVisible">
<mat-icon>{{passwordVisible ? 'visibility' : 'visibility_off'}}</mat-icon>
</button>
I also stumbled upon this issue recently and was able to resolve it using the approach below.
Method onClickRevealPassword will be called if you press enter on the password input field. Such action results in an event called pointerType which you can detect with this method and keep the password field not to reveal the plain password value. Have a look and experiment it with your component.
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input name="password" formControlName="password" matInput [type]="passwordVisible ? 'text' : 'password'">
<button mat-icon-button matSuffix (click)="passwordVisible = !passwordVisible; onClickRevealPassword($event)" [attr.aria-label]="'Hide password'"
[attr.aria-pressed]="!passwordVisible">
<mat-icon>{{passwordVisible ? 'visibility' : 'visibility_off'}}</mat-icon>
</button>
</mat-form-field>
onClickRevealPassword(event) {
event.preventDefault();
// Prevent revealing the password when enter button is pressed.
if (event?.pointerType) {
this.passwordVisible = !this.passwordVisible;
}
}
I have the following Angular Material form with the Close and Save buttons in an outside div for design reasons:
<h1 mat-dialog-title>Product Page</h1>
<div mat-dialog-content>
<form [formGroup]="productForm">
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input formControlName="name" required matInput placeholder="Name" style="text-transform:uppercase">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Weight</mat-label>
<input type="number" required formControlName="weight" matInput placeholder="weight">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions [align]="'end'">
<button mat-raised-button color="warn" mat-dialog-close>Close</button>
<button mat-raised-button color="primary" (click)="saveProduct()">Save</button>
</div>
I want to disable the Save button when the form fields are empty but the required parameter isn't working since the buttons are in an outside div. Is there a way to correlate the buttons with the form such that the Save button is disabled until the required fields are filled in?
You can bind it manually :
<button (click)="submit()" [disabled]="!form.valid">Submit</button>
Or you can cheat your way in the modal by providing the form as the main container (yes, it works)
<form [formGroup]="form">
<h1 mat-dialog-title>...</h1>
<div mat-dialog-content>...</div>
<div mat-dialog-actions align="end">
<button type="submit" [disabled]="!form.valid">Submit</button>
</div>
</form>
You could add a validation to your formGroup and use the formGroup to set the button disabled:
on your component:
constructor(fb:FormBuilder
(...)
) {
this.productForm = fb.group({
name: [null, Validators.required]
(...)
})
}
then on your template, adjust the button:
<button mat-raised-button color="primary" [disabled]="productForm.invalid" (click)="saveProduct()">Save</button>
You might as well remove the 'required' from you input (as angular will warn you about this in the console):
<input formControlName="name" matInput placeholder="Name" style="text-transform:uppercase">
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>
I am using Angular 9 with angular Material Reactive Forms. I want to disable the fields, but without using the disabled status on the formControl, just only using HTML instead of programmatically in ts.
My Html:
<form name="nameForm" [formGroup]="nameForm" fxLayout="column">
<mat-form-field fxFlex="50" class="m-4">
<input matInput name="startTime" formControlName="startTime" placeholder="{{'DATE.START' | translate}}" type="date">
</mat-form-field>
<mat-form-field fxFlex="30" class="m-4">
<input matInput name="period" formControlName="period" placeholder="{{'TITLE.PERIOD' | translate}}" type="number" step="0.1">
</mat-form-field>
<mat-form-field fxFlex="20" class="m-4">
<input matInput name="range" formControlName="range" placeholder="{{'TITLE.RANGE' | translate}}" type="number" step="0.1">
</mat-form-field>
</form>
My ts:
ngOnInit(): void {
this.nameForm = this.createNameForm();
... some code ...
}
private createNameForm() {
return this.formBuilder.group({
startTime: new FormControl(this.startTime, []),
period: new FormControl(this.period, []),
range: new FormControl(this.range, []),
});
}
... some code ...
I came across this doubt because some questions like this one (How to disable a text area or mat-form-field) has programmatic answers, and I would like to know if it can be solved using exclusively the Html. I know [disabled]="true" does not work, but maybe with a different directive?.
I hope it's clear enough and thanks in advance.
I think that the disabled directive is not valid for the input (it would work with a select or text-area for example ) but to disable the input we can use the readonly directive
[readonly]="true"
[readonly]="method()"
[readonly]="variable"
Although, if you need to disable it, another solution would be
[attr.disabled]="true"
[attr.disabled]="method()"
[attr.disabled]="variable"
I've tried both and they work :)
I have tried both the [disabled] = 'true' and [readonly] = 'true' for the textarea.
Only [readonly] property works well in all the cases in angular.
I have a question concerning angular reactive form. When I want to set default values for my form controls it does not work in the HTML.
TS:
// set form controls
this.DataService.TabArchivForm = this.fb.group({
ArchiveControl: [true],
DateChannelControl: [Date.now(), Validators.required]
});
HTML:
<div class="tab_main" [formGroup]="this.DataService.TabArchivForm">
<mat-form-field class="field_width">
<mat-label class="Inputlabel">Date</mat-label>
<input class="Inputvalue" matInput id="date" [formControl]="this.DataService.TabArchivForm.controls.DateChannelControl" [matDatepicker]="dp3" required>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
<mat-error *ngIf="this.DataService.TabArchivForm.controls.DateChannelControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-checkbox color="primary" [formControl]="this.DataService.TabArchivForm.controls.ArchivControl" id="archive">Archive</mat-checkbox>
</div>
I don't know why it does not set the default values for the HTML elements. The checkbox is unchecked and the input field from the date picker is empty as well. Am I missing something?
Thanks for answers!