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.

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

Below I will let my code and pictures of it looks like

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>

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

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

FormGroup in the ts file

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.

回答1:

This is how i solve it

Putting this in the button

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

and adding this class to the scss file

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

来源：https://stackoverflow.com/questions/60437332/why-my-submit-button-change-his-colour-when-its-disabled-because-i-selected-othe

标签

css

angular

angular-material

ng-bootstrap