Question

我试图找出this.submitted更改为true后按钮未被禁用的原因。 this.submitted默认为False，一旦用户点击提交按钮，它就会调用onSubmit()组件的方法，this.submitted更改为{{1}作为数据提交程序的一部分。这是按钮应该切换到禁用状态，但它不会。

login.component.html

true

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

login.component.ts

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

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>

根据变量值

1 个答案: