変数値に基づいてボタンを無効にする

Question

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