为什么我的提交按钮在禁用时会更改其颜色，因为我在Angular 9中选择了其他单选按钮 [英] Why my submit button change his colour when its disabled because I selected other radio button in Angular 9

问题描述

我现在遇到的问题是，我已经登录并有两个单选按钮，其中一个默认选择为默认，直到现在一切正常，提交按钮看上去已禁用，但是在我单击另一个单选按钮的那一刻，将按钮更改为可用时应具有的颜色.

The problem I have right now is that I have my login and has two radio buttons one is selected for default until now its all fine, the submit button looks disabled but in the moment i click the other radio button the colour of the submit button change to the colour that it should have when is available.

即使按钮的颜色发生更改，您也无法发送信息，除非您输入了正确的数据.

Even when the colour of the button change you cant send the information until you put the correct data.

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

How can I solve this problem? . I'm using angular material, ng-bootstrap and scss.

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

radio buttons所在的html代码以及登录页面的第一种形式.

Code of the html where the radio buttons are located and the first form for the login page.

<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>中的另一个表单具有与上面的表单相同的代码，但没有单选按钮.

In the <app-home-admin></app-home-admin> is the other form that has the same code of the form above but without the radio buttons.

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

And this is how i change the colour of the submit button when is disabled, its located in the style.scss.

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

ts文件中的

FormGroup

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)])]
    })
  }
}

这是它的外观，在您输入正确的信息之前，它应该始终处于禁用状态.

This is how it looks like, it should always look disabled until you put the correct information.

推荐答案

这就是我的解决方法

This is how i solve it

将其放在按钮中

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

并将此类添加到scss文件

and adding this class to the scss file

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

这篇关于为什么我的提交按钮在禁用时会更改其颜色，因为我在Angular 9中选择了其他单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！