javascript - 根据变量值禁用按钮

Question

我试图找出为什么按钮在 this.submitted 之后没有被禁用。更改为true 。 this.submitted是 False默认情况下，一旦用户单击提交按钮，它就会调用 onSubmit()组件的方法和this.submitted更改为true作为数据提交程序的一部分。此时按钮应该切换到禁用状态，但事实并非如此。

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>

为了简单起见，我从下面的 ts 文件中删除了表单验证。

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

正如 devqon 所指出的，您有一个拼写错误:

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

您需要将代码更改为:

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