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>