Angular material button does not change color

2086 views html
2

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?

answered question

1 Answer

9

problem solved by adding :

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

in the compponent.ts file

posted this

Have an answer?

JD

Please login first before posting an answer.