0

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

}
2
  • 3
    Your variable is called submitted (2 t's) instead of submited (one t) Commented Jan 31, 2017 at 11:42
  • "facepalm" good spot :) Commented Jan 31, 2017 at 11:43

1 Answer 1

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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.