Angular 2即使存在錯誤也提交表單

Question

我正在嘗試使用Form Builder實現Angular 2 Form。 這是我的component.html

 <div class="login-container">
  <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.$value)" #f="ngForm" novalidate class="col-md-5">
    <div class="text-center">
      <img src="assets/logo.png" alt="Logo" class="img-fluid">
    </div>
    <input id="username" formControlName="username" type="text" placeholder="Usuario" aria-describedby="Usuario" class="form-control">
    <input id="password" formControlName="password" type="password" placeholder="Contraseña" aria-describedby="Contraseña" class="form-control">
    <button type="submit" class="btn btn-primary btn-block btn-lg">Entrar</button>
  </form>
</div>

這是我的component.ts

...
constructor(
    private router: Router, 
    private authenticationService: AuthService,
    public fb: FormBuilder) { 
      this.loginForm = this.fb.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
      });    
    }
...
login(value:any) {
    this.loading = true;
// Here goes the authentication logic.
      }

但是即使有錯誤或輸入為空，我的表單也始終提交。 我做錯什么了嗎？ 還是缺少什​​么？

Answer 1

您沒有做錯任何事情，這是編碼方式所預期的行為。 如果您不希望在出現錯誤時提交表單，則需要在表單提交按鈕處於無效狀態時禁用它。

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

Answer 2

您可以從表單發送有效屬性。

<form [formGroup]="loginForm" #f="ngForm" (ngSubmit)="login(loginForm.$value, f.valid)" novalidate>

然后在提交功能中檢查它。

login(value:any, valid: boolean) {
    if (!valid) {
      return;
    }

    this.loading = true;
     // Here goes the authentication logic.
 }

Answer 3

如果您想保持按鈕可用但檢查提交表單，則可以使用' updateOn： Submit'執行以下操作，這是Angular5以來的新功能： https ://medium.com/codingthesmartway-com-blog/angular- 5-表單的更新9587c3735cd3

或者，在這里找到另一種選擇（查找kara的文章）： https : //github.com/angular/angular/issues/14527 ：

  <form [formGroup]="heroForm" #formDir="ngForm">
  <div *ngIf="heroForm.hasError('required', 'name') && formDir.submitted">
     Name is required.
  </div>
   <input formControlName="name">
   <input formControlName="power">
   <button [disabled]="heroForm.invalid && formDir.submitted">
      Submit 
   </button>
</form>