Угловая кнопка материала не меняет цвет

Question

Привет, люди, я столкнулся с проблемой, когда цвет кнопки Angular material применим в некоторых случаях, как этот:

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>

Результат:

Как вы видите, обе кнопки имеют одинаковый код, но для одной цвет применяется, а для другой - нет, и я хочу использовать этот цвет внутри моей формы ... какие-либо решения?

Answer 1

проблема решена путем добавления:

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

в файл compponent.ts