disable a button based on variable value

Question

I'm trying to figure out as why the button does not get disabled after the this.submitted changes to true. The this.submittedis False by default, once the user clicks on the submit button, it calls the onSubmit() component's method and this.submitted is changed to true as part of the data submitting procedure. And this is when the button should switch to disabled state, however it does not.

login.component.html

<div class="container wrapper">
  <div class="row">
    <div class="col-md-4">
      <div class="ui-box login-panel">
        <form class="form-signin" [formGroup]="loginForm" (keyup.enter)="onSubmit()" (ngSubmit)="onSubmit()">
          <div class="form-group">
            <input type="text" placeholder="Username" class="form-control" formControlName="username" name="username" 
             maxlength="20" required="" autofocus="">
            <div *ngIf="formErrors.username" id="username_err" class="alert alert-danger"> 
              {{ formErrors.username }}  
            </div>
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control" formControlName="password" 
            name="password" maxlength="20" required="" autofocus="">
            <div *ngIf="formErrors.password" class="alert alert-danger"> 
              {{ formErrors.password }}  
            </div>
          </div>

          <button type="submit" class="btn btn-lg btn-primary btn-block" 
              [disabled]="!loginForm.valid" > Sign in 
          </button>

        </form>
        <a class="forgotLnk">I can't access my account</a>

        <div class="or-box">
            <span class="or">OR</span>
            <div class="row">
                <div class="col-md-12 row-block">
                    <button [disabled]="submited" (click)="signup($event)" class="btn btn-lg btn-primary btn-block">Create New Account</button>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="ui-box info-panel">

        <div class="masthead clearfix">
          <div class="inner">
            <nav class="nav nav-masthead">
              <a class="nav-link active" href="#">News</a>
              <a class="nav-link" href="#">Updates</a>
              <a class="nav-link" href="#">Events</a>
            </nav>
            <div class="container-fluid info-body">
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

For the sake of simplicity I have removed the form validation from the below ts file.

login.component.ts

import { Component, OnInit }                    from '@angular/core';
import { Router }                               from '@angular/router';
import { LoginService }                         from '../services/login.service';
import { User }                                 from '../classes/interfaces/user.interface';

@Component({
  moduleId: module.id,
  selector: 'login-panel',
  templateUrl: '../templates/login.component.html',
  styleUrls: [ '../styles/login.component.css' ],
  providers: [ LoginService ]
})
export class LoginComponent implements OnInit {

  public submitted:boolean = false;
  public loginForm: FormGroup;

  constructor(
    private router: Router,
    private loginService: LoginService,
    private fb: FormBuilder
  ) {}

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

  public onSubmit(): void {
    if ( ! this.submitted ) {
      this.submitted = true;
      this.loginUser( this.loginForm.value );
    }
  }

  private loginUser( user: User ){
    if ( this.loginForm.valid ) {
      //console.log( user )
      this.loginService.login( user ).then( (token) => {
        localStorage.setItem('id_token', token.id);
        this.router.navigate(['home']);
      }).catch( (error) => this.onLoginFailed(error) );
    }
  }

  private onLoginFailed( error: any ): void {  
    this.submitted = false; /// make form submitable again ///
  }

  public signup( event: any ): void {
    event.preventDefault();
    this.router.navigate(['signup']);
  }

}

Answer 1

You have a typo, as pointed out by devqon:

<button [disabled]="submited" (click)="signup($event)" class="btn btn-lg btn-primary btn-block">Create New Account</button>

You need to change your code to:

<button [disabled]="submitted" (click)="signup($event)" class="btn btn-lg btn-primary btn-block">Create New Account</button>