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-forms-update-9587c3735cd3

或者，在这里找到另一个选项（寻找 kara 的 post）：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>

Angular 2 提交表单，即使有错误

Angular 2 submits form even with errors

angular2-formbuilder

angular

angular5