为什么我的提交按钮在禁用时会改变颜色，因为我在 Angular 9 中选择了其他单选按钮

Question

我现在遇到的问题是我有我的登录名并且有两个单选按钮默认选择一个直到现在一切正常，提交按钮看起来被禁用但是在我点击另一个单选按钮的那一刻颜色提交按钮的颜色更改为可用时应有的颜色。

即使按钮的颜色发生变化，您也无法发送信息，直到您输入正确的数据。

我该如何解决这个问题？ .我正在使用 angular material、ng-bootstrap 和 scss.

下面我将让我的代码和图片看起来像

radio buttons所在的html的代码和登录页面的第一个表单。

<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>

并将此 class 添加到 scss 文件

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

为什么我的提交按钮在禁用时会改变颜色，因为我在 Angular 9 中选择了其他单选按钮

Why my submit button change his colour when its disabled because I selected other radio button in Angular 9

css

angular

angular-material

ng-bootstrap