Angular material button does not change color

user_10357569 0
Viewed 1255

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: enter image description here

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?

angular-material angular css html
2 Answers

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.

user_122593200

problem solved by adding : 

 this.form = this.fb.group({
      email: ['', [Validators.required]],
      password: ['', [Validators.required]]
    });

in the compponent.ts file

user_103575690
Related