title: Why my submit button change his colour when its disabled because I selected other radio button in Angular 9
body: <p>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.</p>
  
  <hr>
  
  <p>Even when the colour of the button change you cant send the information until you put the correct data.</p>
  
  <p>How can I solve this problem? . I'm using <code>angular material</code>, <code>ng-bootstrap</code> and <code>scss</code>.</p>
  
  <ul>
  <li>Below I will let my code and pictures of it looks like</li>
  </ul>
  
  <p>Code of the html where the <code>radio buttons</code> are located and the first form for the login page.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="bg"&gt; 
  &lt;div class="main-div color"&gt;
      &lt;mat-card class="z-depth center" flex="50" &gt;
          &lt;mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn"&gt;
              &lt;mat-radio-button  [value]="true" &gt;User&lt;/mat-radio-button&gt;
              &lt;mat-radio-button [value]="false"&gt;Admin&lt;/mat-radio-button&gt;
          &lt;/mat-radio-group&gt; 
              &lt;div class="row justify-content-center" *ngIf="radio_btn==false;else form2"&gt;
                  &lt;form class="example-form " [formGroup]="loginForm" (ngSubmit)="sendUser()"&gt;
                      &lt;mat-form-field class="example-full-width"&gt;
                          &lt;input matInput formControlName="Identifier" placeholder="Identifier" &gt;
                      &lt;/mat-form-field&gt;&lt;br&gt;
                      &lt;div *ngIf="loginForm.get('Identifier').hasError('Identifier') &amp;&amp; loginForm.get('Identifier').touched"&gt;Introduce an email&lt;/div&gt;&lt;br&gt;
                      &lt;mat-form-field class="example-full-width"&gt;
                          &lt;input matInput formControlName="Password" placeholder="Password" type="password"&gt;
                      &lt;/mat-form-field&gt;&lt;br&gt;
                      &lt;div *ngIf="loginForm.get('Password').hasError('Password') &amp;&amp; loginForm.get('Password').touched"&gt;Introduce the correctly password&lt;/div&gt;&lt;br&gt;
                      &lt;button mat-raised-button [disabled]="loginForm.invalid" class="colour_button" type="submit"&gt;Sign in&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;ng-template #form2&gt; 
                  &lt;app-home-admin&gt;&lt;/app-home-admin&gt;
              &lt;/ng-template&gt;
      &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the <code>&lt;app-home-admin&gt;&lt;/app-home-admin&gt;</code> is the other form that has the same code of the form above but without the radio buttons.</p>
  
  <p><code>SCSS file</code></p>
  
  <pre class="lang-css prettyprint-override"><code>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;
    }
  </code></pre>
  
  <p>And this is how i change the colour of the submit button when is disabled, its located in the <code>style.scss</code>.</p>
  
  <pre class="lang-css prettyprint-override"><code>.md-button.md-raised.md-primary.formPage:not(.disabledclassname) {
      position: right !important;
      color: #FFFFFF !important;
      background-color:#008cba !important;  
      }
  </code></pre>
  
  <p><code>FormGroup</code> in the ts file</p>
  
  <pre class="lang-js prettyprint-override"><code>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 =&gt; {
          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)])]
      })
    }
  }
  </code></pre>
  
  <p>This is how it looks like, it should always look disabled until you put the correct information.</p>
  
  <p><a href="https://i.stack.imgur.com/1NMfP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1NMfP.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/812CR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/812CR.png" alt="enter image description here"></a></p>