Почему моя кнопка отправки меняет свой цвет, когда она отключена, потому что я выбрал другую кнопку-переключатель в Angular 9

Question

Проблема, с которой я столкнулся сейчас, заключается в том, что у меня есть логин и две радиокнопки, одна из которых выбрана по умолчанию, и теперь все нормально, кнопка отправки выглядит отключенной, но в тот момент, когда я нажимаю другую радиокнопку, цвет измените цвет кнопки отправки на тот, который должен иметься, когда доступно.

---

Даже когда цвет кнопки меняется, вы не можете отправить информацию, пока не введете правильные данные.

Как я могу решить эту проблему? , Я использую angular material, ng-bootstrap и scss.

• Ниже я позволю своему коду и изображениям выглядеть так:

Код html, где расположены radio buttons и первая форма для страницы входа в систему.

<div class="bg"> 
<div class="main-div color">
    <mat-card class="z-depth center" flex="50" >
        <mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
            <mat-radio-button  [value]="true" >User</mat-radio-button>
            <mat-radio-button [value]="false">Admin</mat-radio-button>
        </mat-radio-group> 
            <div class="row justify-content-center" *ngIf="radio_btn==false;else form2">
                <form class="example-form " [formGroup]="loginForm" (ngSubmit)="sendUser()">
                    <mat-form-field class="example-full-width">
                        <input matInput formControlName="Identifier" placeholder="Identifier" >
                    </mat-form-field><br>
                    <div *ngIf="loginForm.get('Identifier').hasError('Identifier') && loginForm.get('Identifier').touched">Introduce an email</div><br>
                    <mat-form-field class="example-full-width">
                        <input matInput formControlName="Password" placeholder="Password" type="password">
                    </mat-form-field><br>
                    <div *ngIf="loginForm.get('Password').hasError('Password') && loginForm.get('Password').touched">Introduce the correctly password</div><br>
                    <button mat-raised-button [disabled]="loginForm.invalid" class="colour_button" type="submit">Sign in</button>
                </form>
            </div>
            <ng-template #form2> 
                <app-home-admin></app-home-admin>
            </ng-template>
    </mat-card>
  </div>
</div>

В <app-home-admin></app-home-admin> находится другая форма, которая имеет такой же код формы выше, но без переключателей .

SCSS file

example-icon {
    padding: 0 14px;
  }

  .example-spacer {
    flex: 1 1 auto;
  }
  button {
    display: block;            
    width: 100%;
    margin: 2px;
    text-align: center;
    color: $orange !important;
  }

  .colour_button{
    background: $colour_button;
  }

И вот как я могу изменить цвет кнопки отправки, когда она отключена, она расположена в style.scss.

.md-button.md-raised.md-primary.formPage:not(.disabledclassname) {
    position: right !important;
    color: #FFFFFF !important;
    background-color:#008cba !important;  
    }

FormGroup в файле ts

export class HomeComponent implements OnInit {
  radio_btn:boolean = true;
  loginForm: FormGroup;
  bSignIn = false;
  isSigned:boolean = false;
  snackMessage:string = 'Introduce valid data';
  public errorMessage: string;

  constructor(
    private _builder:FormBuilder, private usersService: UsersService,private router: Router,
    public _snackBar: MatSnackBar
    ) {}

  sendUser(){
    this.bSignIn = true;

    let formData = new FormData();
    formData.append('Identifier', this.loginForm.get('Identifier').value);
    formData.append('Password', this.loginForm.get('Password').value);
    this.usersService.validateUserCredentials(formData)
    .subscribe(
      res => {
        this.bSignIn = false;
        let auxRes: any = res;
        if(auxRes.type == 'success'){
          let auxUser = { 
            personId: auxRes.person_id,
            clientId: auxRes.client_id,
            projectId: auxRes.project_id
          }
          this.isSigned = true;
          localStorage.setItem('leadLogged', JSON.stringify(auxUser));
          this.goToUsersDashboard(auxRes.id);
        }
        else
          this.openSnackBar(this.snackMessage);
      },
    );
  }

  ngOnInit(): void {
    this.ValidateForms();
  }

  ValidateForms(){
    this.loginForm = this._builder.group({
      Identifier: ['',Validators.compose([Validators.required,Validators.minLength(7)])],
      Password: ['',Validators.compose([Validators.required,Validators.minLength(5)])]
    })
  }
}

Вот так это выглядит, оно всегда должно выглядеть отключенным, пока вы не введете правильную информацию.

Answer 1

Вот как я это решаю

Поместив это в кнопку

<button mat-raised-button [class.black]="!loginForm.invalid" [disabled]="loginForm.invalid" type="submit">Sign in</button>

и добавив этот класс в s css файл

.black {
  background-color:$black !important;  ;
 }